리액트(React) - useState / 클로저

 

---

 

 

리액트 useState

 

 

리액트에서 함수형 컴포넌트 이전 클래스형 컴포넌트 사용시에는 상태를 지역변수 state에 정의하고 상태를 변경할 메소드 안에 setState 메소드를 넣어서 상태를 변경 했다.

그럼 왜 state변수를 직접 변경하지 않고 setState를 통해서 했는지는 해당 메소드를 사용해서 리액트 컴포넌트에 상태변경에 대해서 알려주고 리렌더링을 요청 하기 위해서다.

 

---

 

함수형 컴포넌트

 

리액트 함수형 컴포넌트에서는 useState 라는 React Hooks를 사용해서 상태를 관리한다.

해당 훅은 초기값을 받아서 [state, setState] 의 배열을 반환하며 [상태, 상태 변경 핸들러] 로 보면 된다.

 

함수형 컴포넌트는 렌더가 필요 할 때마다 함수를 재호출 하는데 렌더링은 곧 함수 호출이다.

함수가 재호출 되었을때 이전 상태를 기억하고 있어야 하고 리액트에서는 클로저 방식을 사용해서 해결한거 같다.

 

 

useState 내부코드

 

function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

 

dispatcher에는 resolveDispatcher함수의 결과가 할당되고, dispatcher의useState메서드에 초기값을 전달하고 반환된 값을 리턴한다.

 

function resolveDispatcher() {
  var dispatcher = ReactCurrentDispatcher.current;
  return dispatcher;
}

 

 

그리고 resolveDispatcher는 ReactCurrentDispatcher라는 객체의 current프로퍼티를 반환하는데
여기서 ReactCurrentDispatcher는 전역에 설정되어있는 객체이다.

 

const ReactCurrentDispatcher = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: (null: null | Dispatcher),
};

 

해당 current가 dispatcher가 담기는 곳이다.

 

 

---

 

 

• 상태가 담기는 곳이 useState 내부에 있다면 useState를 호출할 때마다 함수의 메모리 공간으로 새로 할당하기 때문에 초기값만 나오게 된다. 따라서 state는 함수의 외부에서 할당되어 여러번 호출되는 useState 함수가 이 지역 변수를 공유할 수 있도록 되어있다.
• 리액트에서는 useState 외부에 선언된 state를 배열 형식으로 관리하며 선언된 state 들은 배열에 순서대로 저장된다.
• 해당 상태 배열은 컴포넌트를 유일하게 구분 짖는 키를 통해 접근 할수 있다.
• 반복문, 조건문 또는 중첩 함수에서 호출하면 안되는 이유도 위와 같은 이유 때문인데 해당 조건을 지키지 않으면 순서가 있는 배열이 실행 순서가 달라 질수 있기 때문에 원하는 상태를 가져올수 없는 일이 생길수 있다.
• 훅은 함수 컴포넌트, 커스텀 훅 내에서만 호출 가능하다
• 해당 조건들이 지켜지면 렌더링시 동일한 순서로 훅이 호출되는 것을 보장받을수 있다.

 

---

추후 보강 예정

 

https://covelope.tistory.com/

Ch.Covelope

 

---