[모던 리액트 Deep Dive] 03장 리액트 훅 깊게 살펴보기

 

리액트로 개발하면서 훅은 항상 사용하는데, 정확히 이 훅이 어떤 의미이고 왜 이렇게 사용하는지에 대해 잘 모르는 것 같아서 한번 모던 리액트 Deep Dive에 있는 내용을 정리해보겠습니다.

---

훅(hook)이 뭐냐?

클래스형 컴포넌트에서만 할 수 있었던 상태 관리와 라이프사이클(생명주기) 메서드를 함수형 컴포넌트에서도 사용할 수 있게 해주는 함수죠.

 

대표적인 훅에 대해 알아봅시다.

 

1.useState

함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있도록 해주는 훅이다.

import {useState} from 'react';

const [state, setState] = useState(initialState);

 

리액트는 useState를 사용하지 않고 함수 내부에서 자체적으로 변수를 사용해 상태값을 관리하면 리렌더링이 되지 않는다.

왜냐? 리액트는 함수 컴포넌트의 return을 실행해 결과물(JSX)을 저장하고 그걸 객체로 변환해서 가상DOM으로 만든다.

그리고 이전의 가상 DOM이랑 비교해서 실제 변경사항만 DOM에 반영하는 렌더링 과정을 거치기 때문이다.

 

함수 컴포넌트는 매번 함수(return)를 실행해 렌더링이 일어나고, 함수 내부의 값은 함수가 실행될 때마다 다시 초기화된다.

그렇다면 useState 훅의 결과값은 어떻게 함수가 실행돼도 그 값을 유지하고 있을까?

 

리액트는 클로저를 이용했다.

 

어떤 함수(useState) 내부에 선언된 함수(setState)가 함수(useState)의 실행이 종료된 이후에도(useState가 호출된 이후에도) 지역변수인 state를 계속 참조할 수 있다는 것을 의미한다.

 

클로저를 사용함으로써 외부에 해당 값을 노출시키지 않고 오직 리액트에서만 쓸 수 있었고, 함수 컴포넌트가 매번 실행되더라도 useState에서 이전의 값을 정확하게 꺼내 쓸 수 있게 됐다.

 

게으른 초기화

게으른 초기화는 useState에 변수 대신 함수를 넘기는 것이다.

오로지 state가 처음 만들어질 때만 사용된다.

이후에 리렌더링이 발생된다면 이 함수의 실행은 무시된다.

리액트에서는 렌더링이 실행될 때마다 함수 컴포넌트의 함수가 다시 실행된다는 점을 명심하자.

 

게으른 초기화는 무거운 연산이 요구될 때 사용하면 된다.

(스토리지 접근, map, filter, find 같은 배열에 대한 접근, 초깃값 계산을 위해 함수 호출이 필요할 때..)

---

2.useEffect

생명주기 메서드를 대체하기 위해 만들어진 게 아니라, 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과(사이드 이펙트)를 만드는 매커니즘이다.

function Component(){
  useEffect(() => {
   //do something
  }, [props, state]);
}

 

첫번째 인수로는 실행할 부수 효과가 포함된 함수를, 두번째 인수로는 의존성 배열을 전달한다.

의존성 배열이 변경될 때마다 useEffect의 첫 번째 인수인 콜백을 실행한다.

 

클린업 합수의 목적

일반적으로 이 클린업 함수는 이벤트를 등록하고 지울 때 사용해야 한다고 알려져 있다.

useEffect는 콜백이 실행될 때마다 이전의 클린업 함수가 존재한다면 그 클린업 함수를 실행한 뒤에 콜백을 실행한다.
따라서 이벤트를 추가하기 전에 이전에 등록했던 이벤트 핸들러를 삭제하는 코드를 클린업 함수에 추가하는 것이다.
이렇게 함으로써 이벤트 핸들러가 무한히 추가되는 것을 방지할 수 있다.

 

언마운트 개념이라기보다는 함수 컴포넌트가 리렌더링됐을 때 의존성 변화가 있었을 당시 이전 상태를 청소해 주는 개념으로 보는 것이 옳다.

 

의존성 배열

1.빈 배열

2.아무런 값도 넘기지 않기

3.사용자가 직접 원하는 값을 넣기

 

빈배열이면 최초 렌더링 직후에 실행된 다음부터는 더이상 실행되지 않는다. (useEffect는 언제나 렌더링 된 후에 실행)

아무런 값도 넘기지 않으면 렌더링할 때마다 실행이 필요하다고 판단해 렌더링이 발생할 때마다 실행된다.

값이 있으면 그 값이 변할 때마다 실행된다.

 

(useEffect는 클라이언트 사이드에서 실행되는 것을 보장해준다. 서버에서 실행되면 함수 컴포넌트의 반환을 지연시키고 무거운 작업일 경우 렌더링을 방해하므로 성능에 악영향을 미칠 수 있다.)

 

즉, useEffect는 컴포넌트가 렌더링 된후에 어떠한 부수 효과를 일으키고 싶을 때 사용하는 훅이다.

---

3.useRef

useRef는 참조를 생성(객체를 반환)하고 관리하는 훅이다.

useState와 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장한다는 공통점이 있다.

하지만 큰 차이점이 있다.

 

1. 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있다.

2. 그 값이 변하더라도 렌더링을 발생시키지 않는다.

 

그리고 useRef는 컴포넌트가 렌더링될 때만 생성되며, 컴포넌트 인스턴스가 여러 개라도 각각 별개의 값을 바라본다.

DOM 요소에 직접 접근할 때 많이 사용하고,

useRef를 사용하여 생성한 참조는 컴포넌트가 리렌더링 될 때마다 새로 생성되지 않고, 어플리케이션이 종료되거나 가비지 컬렉팅되기 전까지 기존에 생성한 참조를 그대로 유지한다. => 그래서 리렌더링을 발생시키지않는거구나..