[코드잇 스프린트 풀스택 4기] 리액트(React) 컴포넌트

리액트 컴포넌트의 정의와 특성

- 리액트 애플리케이션을 구성하는 최소 단위를 말한다.

- view를 독립적으로 관리하고 재사용할 수 있다.

- props를 입력받고 state를 정의하여 DOM을 렌더링한다.

- 컴포넌트는 대문자로 시작한다.

 

리액트 컴포넌트의 종류

초기에 클래스형 컴포넌트를 주로 사용하였으나 사용의 불편이 있어 나온 것이 함수형 컴포넌트이며 이 과정에서 hook이 개발됨

 

1. 클래스형 컴포넌트(Class Component)

- 클래스의 형태로 컴포넌트를 정의

- 코드내에서 Lifecycle과 state 기능 구현

 

2. 함수형 컴포넌트(Stateless Functional Component)

- 함수의 형태로 컴포넌트를 정의하고 export와 import를 통해 사용

- hook을 사용하여 라이프사이클과 state 기능 구현

 

함수형 컴포넌트는 클래스형에 비해

- 선언이 편하다. (작성코드가 더 적다)

- 메모리 자원을 덜 사용한다.

- 빌드 후 파일 크기가 더 작다.

- render() 함수가 필요없어 컴포넌트 마운트 속도가 더 빠르고 가독성이 좋다