[React] 컴포넌트(Component)

리액트에서 컴포넌트(Component)란, 리액트 앱의 UI 요소를 표현하는 최소한의 단위 요소입니다. 독립적인 부품으로 존재하기 때문에, 각 컴포넌트는 의존성이 낮아 재활용성이 높아집니다. 

컴포넌트의 이름은 항상 대문자로 시작해야 하는데, 리액트는 소문자로 시작하는 요소들을 모두 DOM 태그로 인식하기 때문입니다. 

 

컴포넌트를 생성하는 방법에는 1) 함수형 컴포넌트와 2) 클래스형 컴포넌트가 있습니다. 현재는 주로 함수형 컴포넌트로 컴포넌트를 생성하는 방법을 지향하지만, 기존 코드에서는 클래스형 컴포넌트가 사용되는 경우도 많기 때문에 두 가지 방법을 모두 알아보겠습니다. 

 

1) 함수형 컴포넌트

함수형 컴포넌트는 function 키워드나 화살표 함수와 같이, 전형적인 JavaScript 함수의 형태로 작성됩니다. 따라서 코드를 작성하기가 더 편리하다는 장점이 있습니다.

리액트 16.8 이후로는 State, Effect, Context와 같은 훅을 통해 state와 컴포넌트의 생명주기와 같은, 클래스형 컴포넌트에서만 가능했던 여러 기능들을 함수형 컴포넌트로 사용할 수 있게 되었습니다. 

 

다음은 함수형 컴포넌트 생성 예시입니다.

function MyExample1() {
  return (
    <div>
      Created with function keyword
    </div>
  );
}

const MyExample2 = () => {
  return (
    <div>
      Created with arrow function
    </div>
  );
};

 

 

2) 클래스형 컴포넌트

클래스형 컴포넌트는 JavaScript의 클래스의 형태로 작성됩니다. class 키워드로 정의하고 render() 함수를 사용해 jsx 코드를 반환합니다. 

 

클래스형 컴포넌트는 구버전의 라이브러리를 사용해야 되거나, 함수형 컴포넌트를 사용하지 않았던 코드베이스의 프로젝트를 사용할 때만 사용되는 추세입니다. 함수형 컴포넌트가 가지고 있는 훅들은 클래스형 컴포넌트가 지원하지 않다는 점도 주의해야 합니다.

 

다음은 클래스형 컴포넌트 생성 예시입니다.

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