[React Hook] useEffect 사용 (Function Life Cycle)

- 지난 시간

안녕하세요. 지난 시간에는 Function Component를 만들고 useState를 사용하는 방법에 대해서 알아봤습니다.

 

혹시 놓치고 오신 분들은 아래 링크를 통해 확인하고 와주세요. :)

any-ting.tistory.com/22

[React Hook] 함수형 Component 선언 및 useState 사용법

- 개요

Class Component에는 기본적인 Life Cycle 생명주기가 있습니다. Component가 생성되고 소멸되는 과정에 있어 함수가 있습니다.

 

이 부분에 대해서 이해가 안 가시는 분들은 아래 링크를 통해 확인하고 와주세요:)

 

any-ting.tistory.com/10

[React Class] Class Component Life Cycle(생명주기)

- useEffect 사용법

Function Component에서 생명주기를 다루는 Hook은 useEffect입니다.

 

//전체 코드
useEffect(() => {
	// 1번 영역
	console.log('컴포넌트가 화면에 나타남 ');
	
	return () => {
		// 2번 영역
		console.log('컴포넌트가 화면에서 사라질 때  실행 공홈에서는 : clean up 이라고 표현');
	};
}, []); //  [] useEffect에 agument 값을 설정한다. state 값을 넣어 주면된다.

 

위 코드는 Function Component안에 선언해서 사용하면 됩니다. (Hook 규칙 참고)

 

기본적으로 Component가 생명주기는 3가지 상황이 있습니다.

1. Component가 생성될 때
2. Component가 소멸될 때
3. Component가 재 생성될 때 (state 값이 수정될 때)

이런 상황에서 맞게 useEffect를 만들어 사용할 수 있습니다.

 

1. Component가 생성 될때

1. Component가 최초 생성될 때 한번만 실행
useEffect(() => {
  // 1번 영역
  console.log('1번 방식 컴포넌트가 화면에 나타남 ');
}, []) //  [] useEffect에 agument 값을 설정한다. state 값을 넣어 주면된다.
  
2. Component가 최초 생성되고 재 생성될 때마다 실행(계속 실행)
useEffect(() => {
  // 1번 영역
  console.log('2번 방식 컴포넌트가 화면에 나타남 ');
}) //  [] useEffect에 agument 값을 설정한다. state 값을 넣어 주면된다.

 

1번은 딱 한 번만! (ComponentDidMount)

2번은 재 랜더링 될 때마다 실행 (ComponentDidUpdate)

 

설명 :  1번과 2번에 차이는 말 그대로 Component가 최초 실행될 때 딱 한 번만 실행될 때와 Component의 state 값이 변경되거나 특별한 상황에 재 랜더링 하는 상황에 실행되는 차이가 있습니다.

 

 

실행 화면(1)

 

실행 화면(2)

App Component 안에 위 코드를 작성했습니다. 1번 코드는 새로고침 했을 때 딱 한번 실행이 되고 2번 코드는 재 렌더링이 될 때마다 실행되는 걸 확인하실 수 있습니다. 

 

2. Component가 소멸될 때와  재 생성될 때

useEffect(() => {
  // 1번 영역
  console.log('컴포넌트가 화면에 나타남 ');
    
  return () => {
	// 2번 영역
	console.log('컴포넌트가 화면에서 사라질 때  실행 공홈에서는 : clean up 이라고 표현');
  };
    
}, [show]); //  [] useEffect에 argument 값을 설정한다. state 값을 넣어 주면된다.

useEffect에 두 번째 [](배열) argument(전달인자)에는 state값을 넣을 수 있습니다.

 

state 값을 설정하면 state 값을 감시하고 있다가 값이 변경되게 되면 해당 useEffect가 동작합니다.

 

위 코드는 show라는 state 값을 설정해놨습니다. 실행 화면을 보면 Show 버튼을 클릭하면 show state 값이 변경됩니다.

 

- 실행 순서

  첫 번째 랜더링(1번 영역) -> 2. Component 사라짐 재 랜더랑 (2번 영역과 1번 영역 순차 실행)

 

 

2번 영역은 해당 Component가 기존에 가지고 있던 데이터를 초기화를 해야 하는 상황을 고려해서 코드를 작성할 수 있습니다.

 

2번 영역에서 데이터를 초기화를 했다면 1번 영역에서 다시 데이터를 설정할 수 있습니다.

 

Component가 재 랜더링 될 때 항상 2번과 1번이 순차적으로 실행된다는 점 항상 이해하고 있어야 합니다.

 

실행 화면

이번 시간에는 React useEffect Hook에 대해 알아봤습니다.