[React] 컴포넌트란? 함수형/클래스형

😎 컴포넌트

컴포넌트는 UI 를 구성하는 조각(piece)에 해당되며, 
독립적으로 분리되어 재사용을 됨을 목적으로 사용됩니다.
React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리합니다. 
(예: Header, HeaderTitle, Wrapper, List, ListItem 컴포넌트)

 

리액트에서 컴포넌트는 앱을 이루는 최소한의 단위이다.

또한 props나 state와 같은 데이터를 입력받아 DOM 노드를 생성한다. 

이러한 컴포넌트들이 유기적으로 잘 연결되고 동작되어야 훨씬 효율적인 앱이 될 수 있다. 

 

props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다.
어떠한 값을 컴포넌트에 전달해 줘야 할때 사용하며 할당된 후 컴포넌트 내부에서 값을 변경할 수 없다.

state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 동적인 데이터를 다룰 땐 state를 사용한다.


이러한 기능을 통해 컴포넌트 간에는 무조건 props를 통해서만 데이터를 주고받고 변경되는 값은 state만큼만 확인하면 되므로 개발자가 더 편리하게 개발을 할 수 있게 되었다.

 

 

 

 

 

리액트에서 정의하는 컴포넌트 종류에는 크게 함수형 컴포넌트, 클래스형 컴포넌트 2가지가 있다. 

😎 함수형 컴포넌트

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

데이터를 가진 하나의 props객체 인자를 받은 후 React 엘리먼트를 반환한다.

이러한 컴포넌트는 JavaScript 함수이기 때문에 말그대로 "함수형 컴포넌트"라고 불린다.

React 컴포넌트는 개념상 JavaScript 함수와 유사합니다.
컴포넌트 외부로부터 속성(props)을 전달 받아 어떻게 UI 를 구성해야 할지 설정하여
React 요소(JSX 를 Babel 이 변환 처리)로 반환합니다. 이러한 문법 구문을 사용하는
컴포넌트를 React 는 '함수형(functional)'으로 분류합니다.

 

 

😎 클래스형 컴포넌트

class Welcome extends React.Component {
  render() { /*클래스형은 rende함수 필수*/
    return <h1>Hello, {this.props.name}</h1>;
  }
}

주로 함수형 컴포넌트를 사용하지만, 함수형 컴포넌트로 하지 못하는 작업을 처리할 때 ES6 class를 사용한 "클래스형 컴포넌트"를 활용한다.

 

 

 

😎 함수형? 클래스형? 각 컴포넌트는 차이가 있나요?

React 세계관에서 함수형과 클래스 컴포넌트는 유사합니다.
다만, 클래스 컴포넌트의 경우 함수형 컴포넌트에 없는 기능을 추가적으로 사용할 수 있다는 점이 다릅니다. 
예전에는 클래스형컴포넌트를 사용 현재는 함수형컴포넌트