[ React ] - 훅(Hook) 종류와 사용법 ( useState / useEffect )

  훅(Hook) 종류와 사용법 ( useState / useEffect )

Hook이란?

React 16.8에 새롭게 추가된 것으로, 공식 문서에 따르면 react의 state 관리와 다른 기능을 사용하기 편리하게 만들어준 메서드이다.

useState

useState의 경우 특정 값을 저장하고 해당 값을 변경하는 함수를 반환하여 주는 역할을 하는 react hook이다. 
(기본적으로 해당 state의 값이 변경되면 리렌더링이 이루어진다.)

ex) useState 활용 예시

useState에서 state변경 함수를 통해 state를 변경할 때에 주의점은 기존의 state값과 변경하려는 state의 값이 같으면 메모리 절약을 위해 state가 변경되지 않고, 즉 렌더링이 발생하지 않는다.

* state가 array나 object 변경시에는 복사본을 만들어서 변경해야 한다. 

예를 들어 위와 같이 코드 작성시 아래와 같이 item을 입력 후 아무리 아이템 추가를 클릭하여 아무런 변화가 발생하지 않는다. 

위와 같이 기존의 값을 새로운 변수에 복사한 후에 사용하여야 배열이 변화된 것으로 인식되어 아래와 같이 값 추가와 렌더링이 이루어진다.

useEffect

useEffect는 side effect(api 요청과 같은 비동기 관련한 작업) 관련한 작업을 실행하는 역할을 한다.
useEffect는 기본적으로 useEffect(fn, [ ]) 이와 같은 식으로 사용된다.

useEffect는 기본적으로 최초 렌더링시에는 무조건 실행된다. 그리고 이후에 컴포넌트가 마운트(mount)될 때에는 두 번째 인자에 따라 useEffect의 실행 여부가 달라지게 된다.

* 마운트란(mount)?
쉽게 이야기하면 컴포넌트가 브라우저에 나타나는 것을 의미하며, 반대로 언마운트(unmount)란 브라우저에서 컴포넌트가 제거되는 것을 의미한다.

1.  useEffect()의 두 번째 인자를 주지 않은 경우

최초의 렌더링은 물론 리렌더링이 발생할 때마다 해당 useEffect()가 실행된다.

2. useEffect()의 두 번째 인자에 빈 배열을 준 경우

최초의 렌더링 시에만 해당 useEffect()가 실행되며, 이후에 리렌더링이 발생하더라도 페이지 자체가 새로고침  등이 되는 것이 아니라며, 해당 useEffect를 실행하지 않는다.

3. useEffect()의 두 번째 인자의 배열에 dependency를 넣어준 경우 (즉 state 값을 넣어준 경우)

최초의 렌더링은 물론 이후에 setTitle에 의해 title의 state가 갱신될 때마다 해당 useEffect()를 실행한다.

* useEffect() 내부의 return 
useEffect 내부의 return은 언마운트(unmount), 즉 컴포넌트가 브라우저에서 제거 될 때에 실행된다. 때문에 최초 렌더링시에는 실행되지 않고, 무조건 한 번 렌더링이 이루어진 후에 컴포넌트가 리렌더링 되는 과정에서 기존의 컴포넌트를 언마운트하고, 다시 마운트하면서, useEffect() 내부의 return문이 실행된다. 

위의 코드의 경우 up버튼을 누름으로써 계속 count가 1씩 증가하다가 title change 를 누르게 되면, count가 dependency로 들어가있는 useEffect가 실행되고, 해당 useEffect()의 return 에서 setCount(0)가 실행되면서 count가 0이 된다.

 

ex) useEffect와 리엑트 화면 실행순서

 위의 코드 실행 시 최초 화면 렌더링 시에 콘솔이 찍히는 순서는 1 -> 4 -> 두번째인자x -> [] -> [result]: false  이다. 이를 통해 기본적으로 함수 컴포넌트 함수가 실행되는 순서는 (컴포넌트의) return 밖의 영역이 가장 먼저 실행되고, 그 이후에 화면이 그려지는 return 부분이 실행되고,그 이후에 다시 useEffect와 같은 hook이 실행된다는 것을 확인할 수 있다.
그리고 이후에는 useEffect의 두번째 인자에 따라 실행값이 달라지게 된다. button을 누르는 경우 1 -> 4 -> 두번째인자x 가 출력된다. 이는 setCount에 의해 state인 count가 변하면서 마운트(mount)가 이루어졌고, 기본 순서에 따라 1과 4가 출력되고, 두번째 인자가 없어 매 마운트가 이루어질 때마다 실행되는 두번째 인자x 가 출력된 것이다. (빈 배열을 넣어준 useEffect는 최소 렌더링시에만 실행된다.). change state를 누르는 경우에는 1 -> 4 -> return value -> 두번째 인자x -> [result]: true 가 출력된다. 이는 setResult를 통해 result state 가 변경되면서 렌더링 순서대로 1, 4를 출력하고 새롭게 렌더링 되는 과정에서 이전의 컴포넌트는 unmount 되는데 이때에 실행되는 return value 가 실행되고, 이후에 두번째 인자를 주지 않아 매 렌더링마다 실행되는 두번째 인자x 출력하고 이후에 result: true를 출력하는 것이다. useEffect는 기본적으로 두번째 인자로 준 값에 따라 실행 여부가 결정되며, 실행이 확정된 useEffect들의 순서는 위에서 아래로 코드가 작성된 순서대로 실행되며, 그 안에서 useEffect 내부에 return이 존재하는 경우에는 컴포넌트가 unmount 될 때에 실행되므로, 뒤에 작성된 경우라 할지라도 해당 return 함수가 먼저 실행된다. 그 이후에는 다시 순서대로 실행된다.

---

Q) useEffect에서 의존성 배열이 들어가는 두 번째 인자에 useCallback이 들어가는 경우?

useEffect()의 의존성 배열 안에 useCallback으로 감싼 함수가 들어간 경우에는, 해당 함수를 메모리제이션하고, 해당 함수의 참조가 변경될때 useEffect가 실행되게 된다.