React .js - Component

React에서 컴포넌트란?

• JS에서 함수는 코드를 더 명확하고 재사용 가능하게 해준다. 함수는 함수 안에 다른 함수를 호출 할 수 있는데, 이는 함수가 해야 할 일을 명확히 분리할 수 있게 해준다. 즉 모든 명령을 하나의 함수 안에 다 작성할 필요가 없고, 각 작업에 특화된 여러 함수를 만들어 기능을 분리할 수 있다.
• 리액트의 컴포넌트는 함수의 이러한 특징을 웹 앱의 비주얼에 적용한 것이라고 할 수 있다. 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 또한 컴포넌트 안에 컴포넌트를 포함할 수도 있다.
• 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. 컴포넌트는 “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
• 리액트에서 컴포넌트는 JSX를 통해 HTML 엘리먼트를 출력할 수 있는, 재사용 가능한 자바스크립트 덩어리다.

함수 컴포넌트와 클래스 컴포넌트

• 리액트에서 컴포넌트를 만드는 방식은 전통적인 함수를 이용한 방식과 ES6에서 제공하는 class를 이용하는 방식이 있다. JS에서 class는 결국 함수이기 때문에 React의 관점에서 볼 때 이 두 가지 유형의 컴포넌트는 동일하다.

함수 컴포넌트

• 리액트에서 컴포넌트를 정의하는 가장 간단한 방법으로, 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터) 객체를 매개변수로 받은 후 이를 이용하여 React 엘리먼트를 반환하므로 유효한 React 컴포넌트다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 칭한다. 
• function Welcome(props) { // 컴포넌트이름은 무조건 PascalCase로 작성한다. return <h1>Hello, {props.name}</h1>; }
• 장점
  • 클래스 컴포넌트보다 후에 나왔으며 컴포넌트 선언이 편하다.
  • 메모리 자원을 클래스 컴포넌트보다 덜 사용한다.
• 단점
  • state, lifeCycle 관련 기능사용 불가능하다. (하지만 이는 Hook을 통해 해결 가능하다.)

클래스 컴포넌트

• 리액트에서 클래스 컴포넌트는 React.Component를 상속 받아 작성한다. 클래스 컴포넌트는 props라는 매개변수를 받아오고 render 함수를 통해 표시할 뷰 계층 구조를 반환한다.
• class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
• 장점
  • state, lifeCycle 관련 기능 사용이 가능하다.
  • 임의 메서드를 정의할 수 있다.
• 단점
  • 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.