React - Component

1. Component란?

UI의 구성 요소이다.

 

 

과제였던 westagram main 페이지를 예로 들어 Component로 나눠본다면, 크게 nav 컴포넌트와 main 컴포넌트, 그리고 main 컴포넌트 안에는 feed 컴포넌트와 mainright 컴포넌트로 나눌 수 있다. 이와 같이 화면의 구성 요소들을 컴포넌트로 나눌 수 있다.

 

Component를 나눌 시 컴포넌트를 재활용하여 사용할 수 있고, 코드 유지보수에 좋고, 해당 페이지가 어떻게 구성되어 있는지 한눈에 파악하기 좋다. 그리고 특징으로는 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.

 

---

2. Class vs Functional Component

컴포넌트를 선언하는 방식은 두 가지가 있다.

• Class형 컴포넌트(Class Component)
• 함수형 컴포넌트(Functional Component)

1) Class Component

클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에 보여주어야 할 JSX를 반환해야 한다.

import React, { Component } from 'react';

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

export default ReactComponent;

 

2) Functional Component

import React from 'react';

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

export default ReactComponent;

 

함수형 컴포넌트가 보기에는 간단해 보이고 작성하기 편리하다는 장점이 있다. 하지만 리액트를 처음 배우는 단계에서는 class형 컴포넌트가 lifecycle, state, props 등 주요 개념들을 익히기에 훨씬 직관적이고 배우기가 쉽다.