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

🚀 useState

useState는 리액트를 처음 접했을 때, 가장 먼저 사용하게 되는 훅이라고 할 수 있다. 그렇다면 useState의 정확한 원리를 어떻게 될까?

 

✅ useState란?

- 함수형 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅

 

✅ 기본 사용법

import { useState } from 'react'

const [state, setState]=useState(initialState)

- useState는 기본적으로 위와 같이 사용하고, initialState를 지정해주지 않은 경우에는 undefined로 초깃값이 설정된다. 

 

✅ useState 동작 원리

function Test(){
    let state="어서오세요"

    function handleClick(){
        state="안녕히 가세요"
    }

    return(
        <>
        <p>{state}</p>
        <button onClick={handleClick}>클릭</button>
        </>
    )
}

위와 같이 useState를 사용하지 않고, 변수로 선언한 state가 있다고 생각해보자. 과연 이 코드는 동작할까?

위의 코드에서는 버튼을 계속 클릭해도, 어서오세요 라는 글자만 뜨고 안녕히 가세요로 변경되지 않는다. 

그 이유는 다음과 같다. 

 

✔️ 리액트에서는 함수형 컴포넌트의 return을 실행한 다음, 이전의 트리와 비교하고 변경된 부분만 업데이트하는 리렌더링이 일어난다. 그런데 위의 경우는, state가 업데이트되고 있지 않고 있다. 

✔️ 위의 경우는 props가 업데이트되거나, state가 업데이트되거나, 부모 컴포넌트가 리렌더링되는 등 리렌더링이 일어나는 조건이 충족되지 못하고 있다. 

 

function Test(){
    const [, triggerRender] = useState()
    
    let state="어서오세요"

    function handleClick(){
        state="안녕히 가세요"
        triggerRender()
    }

    return(
        <>
        <p>{state}</p>
        <button onClick={handleClick}>클릭</button>
        </>
    )
}

✔️ 만일, 이렇게 state를 업데이트 시켜준다고 해도 렌더링이 되지 않는다. return의 값을 비교해서 실행되지 않고 있기 때문이다. 즉, 매번 렌더링이 발생할 때마다 함수는 새롭게 실행되기 때문에, state는 매번 어서오세요로 초기화된다. 

 

✅ useState와 클로저

- 결론적으로 우리가 원하는 동작의 useState를 위해, 즉 매번 실행되는 함수형 컴포넌트 환경에서 state값을 사용하기 위해 리액트는 클로저를 활용하고 있다. 

- 이는 클로저 내부에서 useState와 관련된 정보를 저장해둔 뒤, 필요할 때마다 꺼내는 형식으로 구성되어있다고 한다. 여기서의 클로저는 useState 내부에 선언되어있는 함수 setState가 실행 종료된 이후, 즉 useState가 호출된 후에도 지역변수인 state를 계속 참조할 수 있다는 것을 의미한다. 

 

✅ 게으른 초기화

- 게으른 초기화란? useState에서 기본값으로 원시값을 넣는 경우가 대부분이지만, 특정한 값을 넘기는 함수를 넣어줄 수도 있는데, 이를 게으른 초기화라고 한다. 

- 공식 문서에서는 useState의 초기값이 복잡하거나 무거운 연산을 포함하고 있을 때 사용하라고 명시되어있다. 

 

🚀 정리 

🩵 리액트에서는 렌더링이 실행되면 그 때마다 함수형 컴포넌트의 함수가 재실행된다.

🩵 useState 내부에는 클로저가 존재하며, 이를 통해 초깃값은 최초에만 사용된다.

 

useState를 당연하게 사용해왔는데, 좀 더 자세한 이면을 알 수 있어서 흥미로웠다!