[react.js] Component 개념

 

리액트는 component 기반이다. component를 통해 UI를 재사용 가능한 개별적인 조각으로 나눌 수 있다.

 

component를 정의하는 방법은 두 가지가 있다.

 

1. Javascript 함수형 컴포넌트

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

- state와 라이프사이클 사용이 불가하다. (단, Hooks 사용시 사용가능하다)

- 컴포넌트 선언이 클래스보다 간편하고 직관적이다.

 

2. ES6 클래스형 컴포넌트

class ImComponent extends React.Component {
  render(){
    return <h1> hello, {this.props.name} </h1>
  }
}

- state 와 라이프사이클 사용이 가능하다.

- 임의 메서드를 정의할 수 있다.

- 예전에 많이 사용했기 때문에 옛날 코드를 유지보수 하는 경우 마주치는 일이 종종 있다.

 

함수형 컴포넌트가 더 나중에 나타났기 때문에 좀더 편리해졌다.

state와 라이프 사이클을 사용하지 못하고 props로만 전달이 가능하다는 단점도 Hook가 등장한 뒤로는 해결이 된 문제이다.

그러나 클래스 컴포넌트를 사용하는 회사가 남아 있도 하고 유지 보수를 위해 알아두는 것이 좋다.

 

일단, 두가지의 컴포넌트 형태를 보자. 모두 return으로 html의 코드를 반환하고 있다.

두 컴포넌트 모두 ImCompoent() 함수가 반환한 HTML이 리액트 앱 화면에 그려지는 것이다.

 

주의! 

Compoent를 생성할때 주의할 점은 첫 글자는 무조건 대문자를 사용해야 한다는 점이다. 
이건 공식 문서에서도 강조하고 있는 매우매우 중요한 조건이다. React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리하기 때문이다.
예를 들어 <div /> 는 HTML <div> 태그를 나타내지만 <Welcome />는 컴포넌트를 나타낸다. 

 

 

component 합성

컴포넌트는 다른 컴포넌트를 참조할 수 있다. 

function Name(props){
  return <h1> hello, {props.name} </h1>;
}

function App () {
  retrun (
    <div>
      <Name name="크리스 에반스" />
      <Name name="주드로" />
      <Name name="톰하디" />
    </div>
  );
}

ReactDOM.render(
	<App />
    document.getElementById('root')
);

<App/> 을 ReactDOM.render() 함수의 첫 번째 인자로 전달하면 App 컴포넌트가 반환하는 것들을 화면에 그릴 수가 있다.

이 App 컴포넌트를 그릴 위치는 ReactDOM.render() 함수의 두번째 인자로 전달하면 된다.

그렇다면 위 코드에선 App 컴퍼넌트에서 Name 컴퍼넌트가 세 번 렌더링 되어서 root에 표출된다. 

쉽게 위 코드를 해석하자면 Name 컴포넌트가 들어있는 App 컴포넌트가 #root 엘리먼트에 그려질 것이다. 라고 해석하면 된다.