useState

🤔 useState 란 무엇이고 어떻게 사용할까 ?

• useState는 함수형 컴포넌트에서 상태 ( State )를 간편하게 생성하고 업데이트할 수 있게 해주는 React Hook이다.

• 초기값을 인자로 받아 [현재 상태 값, 상태 업데이트 함수]를 배열 형태로 반환하며, 상태 변경시 컴포넌트가 리렌더링된다.

🥲 useState 초기값 설정 시 무거운 작업이 있다면 어떻게 처리해야할까 ?

• 초기값을 바로 넣는 대신 콜백 함수를 인자로 전달하면, 컴포넌트가 초기 렌더링에만 해당 작업을 실행할 수 있다.

📄 useState 와 Closure 연관성

• useState는 JavaScript의 Closure 개념을 활용하여 상태를 유지한다.

• Closure는 함수가 생성될 때의 환경 ( 렉시컬 환경 )을 기억하는 특성을 가지고 있다.

• 이를 통해 함수형 컴포넌트가 매번 호출되어도 이전 상태를 기억할 수 있다.

📄 useState 와 React의 Hook 호출 순서와 유의사항

• React는 컴포넌트 렌더링 시 useState 호출 순서를 인덱스로 기억하고 관리한다.

• 이 말을 좀 더 깊게 생각하자면, 첫 렌더링시 순서대로 상태를 저장하고, 리렌더링 시 동일 순서로 상태를 반환하는 것이다.

• 위와 같은 기준으로 유의사항에 대해 알아보자.

  • 순서가 변경되면 React는 잘못된 상태를 반환하는 혼란을 줄 수 있다.

  • 그렇기에 조건문, 반복문에서 useState를 호출하는 것은 금지되는 행동이다.

  • 또한, 상태 업데이트 함수는 비동기적으로 작동하므로 즉시 반영되지 않는 것을 유의해야한다.

  • 추가적으로 복잡한 상태관리 로직을 작성한다면, useState 보다는 useReducer와 같은 다른 Hook을 사용하는 것이 적절하다.