[React] Hook이란 무엇인가

Dongmin Lee·2023년 2월 3일

React

목록 보기

2/11

💿 이 글의 목적

useNavigate도 써봤고, useState도 어떻게 쓰는지 감이 잡힌 것 같아서 잠이 안오는 김에 공식 문서에서 useEffect도 읽어봤다.
대충 얘도 어떻게 쓰는지는 알겠는데.. 나는 항상 내 방식대로 정의하고, 이해하는 걸 좋아한다. 내 머리는 휘발성이 상당히 높아서 단순히 외우는 걸로는 도저히 머리 속에 남길 수 없기 때문이다. 그런데 useEffect가 뭔데? 라고 스스로 물어봤을 때 몰?루라는 대답이 출력되었고, 거슬러 올라가보니 내가 훅도 뭔지 모르네?라는 결론이 도출되었다. 포메라니안에 대해 얘기하면서 강아지가 뭔지도 모르면 말도 안되지. 이렇게 기초도 없이 대충 쓰는 법만 알고 있으면 사상누각이나 다름없다는 생각이 들어서 확실히 짚고 넘어가고자 한다.

💿 React Hook은 왜 만들어졌나

Hook 등장 이전에는 함수형 컴포넌트에서 상태 및 생명주기 관리가 불가능했기 때문에 side effect를 사용하고 싶다면 클래스형 컴포넌트를 사용했다.

💾 Side effect

인자를 받아서 결과를 리턴하는 input-output의 함수 기본 구조에서 인자를 받아서 결과를 리턴하는 과정 이 외의 다른 행위를 side effect라고 한다.
예를 들어,
let num = 3;
function foo(x) {
  return x + num;
}
의 경우, 외부에서 변수 num의 값을 읽어올 때 side effect가 발생했다고 할 수 있다.

함수형 컴포넌트는 상기한 단점 때문에 constant한 단순한 레이아웃 등의 용도로만 사용되다가 Hook의 등장으로 side effect를 활용할 수 있게 되었다.

💿 Component의 생명주기

💾 Mounting => 컴포넌트가 DOM에 삽입될 때!

생성자를 호출(constructor)
props로 가져온 값을 state에 동기화시킴(getDerivedStateFromProps)
렌더링(render)
DOM 및 참조자들을 업데이트함.
첫 렌더링을 마친 후 라이브러리나 프레임워크 함수 호출, 이벤트 등록 등 비동기 작업 처리(componentDidMount)

💾 Updating => 새로운 props가 들어왔거나, setState 또는 forceUpdate가 호출되었을 때!

props로 가져온 값을 state에 동기화시킴(getDerivedStateFromProps)
props나 state가 변경된 후, 렌더링 여부를 결정함(shouldComponentUpdate)
렌더링(render)
컴포넌트의 변화를 DOM에 적용시키기 전 스냅샷을 가져옴(getSnapshotBeforeUpdate)
DOM 및 참조자들을 업데이트함.
렌더링을 마친 후 라이브러리나 프레임워크 함수 호출, 이벤트 등록 등 비동기 작업 처리(componentDidUpdate)

💾 Unmounting => 컴포넌트가 DOM에서 제거될 때!

💿 Hook의 역할

함수 Component는 근본적으로 위와 같은 생명 주기를 가지지 못하지만(호출되면 바로 리턴하고 꽥), 함수형 컴포넌트에 Hook을 사용하면 DOM에 갈고리를 걸어놔서 구독 등의 상태관리를 가능하게 한다.
원리를 이해한대로 알아보자면, useState Hook의 경우,

const [count, setCount] = useState(0); 
const countNum = () => {
  setCount(count+1);
}

이렇게 사용하는데 여기서 count는 함수 컴포넌트 내에서 사용할 지역 변수고 setCount()의 리턴값은 리액트가 따로 관리한다. onClick 같은 비동기 작업에 useState 훅을 걸어놓으면 click 이벤트가 생겼을 때, setCount가 호출되면서 setCount()의 리턴값을 count에 넣어주고 재렌더링이 일어난다. 이로써 함수 지역 변수의 상태가 초기화되지 않고 계속해서 관리가 가능해진다.