React 3 - 컴포넌트

컴포넌트

• 재사용 가능한 UI 구성의 기본 단위를 뜻합니다.
• 페이스북을 예로 든다면, 로그인 후 첫 메인화면에서의 컴포넌트는 1)상단 컴포넌트, 2)메인 컴포넌트 내의 NewsFeed 컴포넌트, 3) 메인 컴포넌트 내의 친구추천 컴포넌트 4) 페이지 맨 하단의 Footer 컴포넌트 등으로 나눌 수 있습니다. 컴포넌트들은 다시 다른 페이지에서 재사용할 수 있습니다.

페이스북의 메인 페이지를 컴포넌트 형태로 나눈 예시. 상단 서치바, 피드, 사진 등의 요소로 나눌 수 있습니다.

컴포넌트의 특징

• 다른 페이지에서도 재사용이 가능합니다.
• 각 페이지 내에 접근하여 일일이 수정하지 않고, 해당 컴포넌트만 수정해주면 되기 때문에 유지보수가 용이합니다.
• 해당 페이지가 어떻게 구성되어 있는지 한 눈에 살펴보기 좋습니다.
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있으며, 컴포넌트이 특성(Props)을 전달할 수 있습니다. (부모 - 자식 컴포넌트)

컴포넌트의 선언 방식

1. 클래스형 컴포넌트

import React, { Component } from 'react';

export class ReactComponent extends Component {
  render() {
    return <div>This is Class Component!</div>;
  }
}

export default ReactComponent;

• 클래스형 컴포넌트 : 클래스형 컴포넌트에서는 render() 함수가 꼭 존재하여야 합니다.

2. 함수형 컴포넌트

import React from 'react';

const ReactComponent = () => {
  return <div>This is functional component</div>;
};

export default ReactComponent;

• 함수형 컴포넌트 : 일반 자바스크립트 함수 형태와 같이 작성하며, 가독성이 좋습니다.
• 처음 리액트를 배우는 단계에서는 클래스의 구조와 state, props, lifecycle 등을 쉽게 익히기 위해 클래스형 컴포넌트를 작성하는 것을 추천합니다.