React Side Effect와 useEffect

useEffect

react의 main job

UI를 랜더링하고 User의 입력에 반응하는 것

1. JSX 코드와 DOM을 평가하고 렌더링
2. 상태와 props를 관리
3. 유저의 이벤트와 입력을 처리
4. UI를 표현

Side Effect

React의 main job을 제외한 React에 일어나는 모든 것이다.

HTTP request를 보내거나 local storage에 저장하거나 타이머나 간격을 조정하는 것

 

그러나 이런 작업들은 적어도 UI적인 측면과는 관계가 없다.

즉, 잠재적 오류를 처리하거나 HTTP request를 보내는 것은 react와 관계가 없다.
-> 즉 컴포넌트 밖에서 일어나야하는 것이다.

 

만약,
1.component에서 axios요청 보냈을 때

2.만약 어떤 state가 바뀌고

3.해당 state가 변경됐을 때 다시 axios가 실행되는

 

이러한 로직이 있다면 무한 루프에 빠지게 된다.

 

또는,
1.첫 랜더링 페이지에서 로그인 후 local storage에 로그인했던 정보를 저장하고

2.컴포넌트가 재실행될 때마다 해당 정보를 불러오고 로그인 여부를 state로 관리

3.그리고 그 state를 useState를 통해 관리한다면 state의 default가 false에서 true로 변경되고

4.그로 인해서 다시 렌더링한다면

5.다시 렌더링하는 과정에서 컴포넌트를 평가하는 과정에서 도중의 코드인 로컬 스토리지 검사가 다시 되기기 때문에

6.다시 렌더링하는 결과가 초래된다.

 

따라서 Side Effect를 처리하는 함수는 component안에 들어가선 안된다.

 

이런 상황에서 쓰는 Hook => useEffect

useEffect

useEffect(() => { ... }, [ dependencies ])

첫 번째 인수

함수로써 모든 컴포넌트 평가 후 실행되어야 하는 함수 -> 저장된 의존성 변수가 변경된 경우에 실행된다.

두 번째 인수

의존성 변수가 담긴 배열 -> 이 변수가 변경될 때마다 첫번째 함수가 실행된다.

 

두 번째 인자가 아예 없을 경우에는 모든 state가 변경될 때마다 useEffect의 함수가 실행된다.
-> useEffect의 함수는 모든 컴포넌트 렌더링 후에 실행되기 때문에(처음 마운팅됐을 때를 포함)
-> 왜 처음 마운팅됐을 때를 포함할까? 의존성 배열이 선언되면서 생성되었기 때문이다.

useEffect 함수의 실행

함수의 실행 조건은 의존성 변수가 변경된 경우에만 실행된다. 컴포넌트가 다시 렌더링 되더라도 실행되지 않는다.

 

실행과 순서

1.컴포넌트가 처음 랜더링된 경우에는 dependencies의 값이 없다가 생기는 것이라서 변경되는 경우이기 때문에 반드시 실행된다.

 

2-1.두 번째 인자가 없다면 모든 state가 변경될 때마다 useEffect의 함수가 실행된다.

2-2.두 번째 인자에 빈 배열 추가시 마운트되고 렌더링 됐을 때만 실행된다!

 

2-3.배열 안에 요소가 추가되면 의존성 배열의 요소가 변경될 때마다 실행된다.

 

2-4.비어있지 않은 배열이 인자로 들어가고 return에 클린업 함수가 생긴다면 해당 의존성 배열 요소가 변경될 때마다 useEffect의 함수가 실행되며 return의 함수도 실행된다.

 

2-5.빈 배열이 인자로 전달되고 클린업 함수가 있다면 useEffect 함수 실행은 한 번만 실행되며 컴포넌트가 제거되는 경우에만 return의 함수가 실행된다.