클래스형 컴포넌트 & 함수형 컴포넌트

리액트의 컴포넌트에는 클래스형과 함수형 두 가지가 있다.

 

과거에는 클래스형과 함수형의 구분이 명확했다. 클래스형은 state와 life-cycle 사용이 가능했고 함수형은 불가했기 때문에, 클래스형은 복잡한 주요 컴포넌트에 사용되었고 함수형은 비교적 단순한 하위 컴포넌트들에 사용되었다.

 

하지만 현재는 함수형에 hook이라는 기능이 출시되면서 함수형에서도 state와 life-cycle을 사용할 수 있게 되었다. 현재는 리액트 공식적으로 클래스형이 아닌 함수형을 사용하는 것을 권장하고 있다.

---

그렇다면 위에서 언급한 life-cyle이 무엇인지 알아보자.

라이프 사이클이란 컴포넌트가 생성 및 사용되고 소멸될 때까지의 일련의 과정을 의미한다.

 

클래스형의 라이프 사이클은 다음과 같다.

 

1. Mount

:  컴포넌트 생성 단계, 컴포넌트가 처음 실행될 때 컴포넌트를 준비함 (default 또는 initial 값 들을 setting)

- ComponentWillMount : 렌더링 이전에 컴포넌트가 마운트 할 것이라는 의미

- render : 화면이 렌더링 됨 

- ComponentDidMount : 렌더링 완료 (서버로부터 데이터는 이때 받아옴)

 

2. Props Update

: 컴포넌트 사용 단계

- ComponentWillReceiveProps

- ShouldComponentUpdate : 성능 최적화

- ComponentWillUpdate 

- render

- ComponentDidUpdate : State는 이 단계에서 변경됨

 

3. Unmount

: 컴포넌트  소멸 단계

- ComponentWillUnmount

---

함수형의 라이프 사이클은 hook을 사용해서 클래스형보다 간단하고 메모리 자원을 적게 사용하게끔 구성할 수 있다.

 

가장 대표적인 hook 두 가지는 useState와 useEffect이다.

useSatae : state 생성 및 상태변화

useEffect : 상태변화 감지

 

useState는 이전 포스팅 참고 : jungeunpyun.tistory.com/28?category=911249

 

useEffect에 대해서 더 자세히 설명해보도록 하겠다.

- 변화하는 인자가 있는 경우 : 해당 인자의 변화를 감지했을 때 동작

- 변화하는 인자가 비워져 있는 경우 : 확인할 인자가 없기 때문에 최초 화면 로드 시 1번만 동작

- 변화하는 인자가 없는 경우 : 모든 상태 변화에 동작

- 변화하는 인자를 여러 개 갖고 있는 경우 : 여러 인자 중 하나의 인자라도 상태변화가 감지되면 동작

useEffect(() => {
동작
},['변화하는 인자'])

useEffect(() => {
동작
},[])

useEffect(() => {
동작
})

useEffect(() => {
동작
},['인자1', '인자2', '인자3'])