React Hook에서 클로저는 어디서 쓰일까?

안녕하세요!

지난 시간에 클로저(Closure)에 대해서 알아보았습니다.

React hook에서도 클로저라는 개념이 사용되는데요.

 

 

먼저 클로저에 대한 개념을 간단하게 알아보겠습니다.

 

 

Closure

---

클로저란 함수가 속한 렉시컬 스코프를 기억하여 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능입니다.

쉽게 말해 함수가 생성될 당시의 외부 변수를 기억하여 생성 이후에도 계속 접근 가능한 것이 클로저입니다.

 

function outer() {
  var name = "song";
  
  function inner() {
    alert(name);
  }
  return inner;
}

var myFunc = outer();

myFunc();

예를 들어 myFunc은 outer에서 inner 함수를 반환받습니다. myFunc이 실행되면 inner가 생성될 때 name 값을 기억하여  song을 alert 합니다.

 

 

useState

---

react 개발을 하다 보면 useState를 정말 많이 사용합니다.

state값이 변경되면 컴포넌트는 변경된 상태를 리렌더링합니다. 

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

위 구조를 살펴보면 [상태, 상태를 변경하는 함수] 라는 것을 확인하실 수 있습니다.

이전 상태와 현재 상태의 변경을 감지하기 위해서는 함수가 실행되었을 때 이전 상태를 가지고 있어야 합니다. 이때 사용되는 것이 클로저입니다.

 

useState를 구현해 보면 이런 코드가 나옵니다.

let value = undefined;
function useState(initValue) {
    const state = value || initValue;
    const setState = newValue => {
        value = newValue;
    }    
    
    return [state, setState]
}

함수 밖에서 value를 선언합니다. setState는 값을 변경할 수 있으며 state는 value의 값을 가져옵니다. (물론 실제 useState는 더 복잡합니다!)

 

state값들이 많아지면 관리하기 힘들고 값들이 겹칠 수도 있습니다. 이를 위해서 React에서는 여러 개의 값들을 배열 형식으로 순서대로 저장하여 관리합니다. 이러한 특성 때문에 Hook은 몇 가지 규칙이 있습니다.

 

 

1. React Hook은 React 함수 최상위 레벨에서 사용해야 합니다.

렌더링 될때 Hook은 동일한 순서로 호출되기 때문에  조건문, 반복문, 중첩 함수안에서 사용하면 안됩니다. 이러한 규칙 때문에 Hook은 상태를 올바르게 보존할 수 있습니다.

 

2. React 함수 안에서만 사용 가능합니다.

필수적이지는 않지만 코드의 어떤 부분이 상태 관련 로직에 의존하는지 명확하게 구분하는게 좋습니다. 반복문, 조건문 내부에서 일반 javascript 함수처럼 이름 붙여진 상태 관련 함수를 호출하는 실수를 하지 않게 됩니다. 첫 번째 규칙을 따르는데 도움이 됩니다.

 

 

정리

---

1. useState는 클로저를 통해 상태 관리를 합니다.

2. hook은 배열 형태로 저장되기 때문에 최상위 레벨에서 사용해야 올바른 값을 보장받을 수 있습니다.

 

 

 

참고 : 

https://www.rinae.dev/posts/getting-closure-on-react-hooks-summary

https://hewonjeong.github.io/deep-dive-how-do-react-hooks-really-work-ko/

https://velog.io/@ggong/useState-Hook%EA%B3%BC-%ED%81%B4%EB%A1%9C%EC%A0%80

https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level