TIL 15. React 2 - Component

Component

한마디로 정리하자면 '재사용이 가능한 UI 단위' 라고 말할 수 있습니다.
예를 들어, 로그인, 회원가입 페이지 만들때 <input>태그 !
여러개 필요했을겁니다. 그래서 똑같은 코드를 옮기는 작업도 많았을겁니다.

이럴 때, 동일 코드가 반복되는 부분을 하나의 component로 만들어서 필요한 곳마다 재사용을 할 수가 있습니다.

* 컴포넌트의 특징

1. 독립적으로 사용.
2. 재사용이 가능하다.
3. 하나의 컴포넌트에 필요한 html, css, js를 모두 합쳐서 만들 수 있다.

컴포넌트 // 함수

:: 기능이 독립적이고 재사용할 수 있다는 점이 컴포넌트와 함수가 비슷한 점입니다.
컴포넌트도 input을 받아서 return할 수 있습니다. 마치 함수처럼요!
React 컴포넌트에서는 input을 props라고 말하고 return은 화면에 보여져야할 React요소가 Return 됩니다.

Component 만들기

React는 컴포넌트를 class나 함수로 만들수 있습니다.

class로 컴포넌트 구현하기

1.우선 React.Component를 extend해서 생성한다.
2.컴포넌트를 생성할 때 render()메서드는 무조건 정의해야합니다.
3.return도 필수

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Welcome이라는 component를 만든것입니다!

function으로 컴포넌트 구현하기

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Welcome이라는 function을 만든것입니다!