최대 1 분 소요

💭 예상 질문

  • useState에 대해 설명해주세요.
  • useState에서 상태를 업데이트할 때 주의해야 할 점은 무엇인가요?
  • useState를 사용한 상태 업데이트가 비동기적으로 처리된다는 말의 의미는 무엇인가요?
  • 상태 업데이트 함수(setState)에서 이전 상태를 참조해야 할 때 어떻게 처리하나요?
  • 상태가 객체나 배열일 경우, useState를 사용할 때 어떤 점을 주의해야 하나요? (불변성)
  • 상태가 자주 변경되면 렌더링 성능에 영향을 줄 수 있습니다. 이를 완화할 방법은 무엇인가요?
state는 컴포넌트가 렌더링 간에 기억해야 하는 데이터 저장소입니다. useState 훅은 상태 변수와 업데이트 함수를 제공하여 컴포넌트에서 state를 관리할 수 있도록 합니다.
일반 변수와 달리 state는 렌더링 간에 값을 유지하며, 업데이트 시 React가 컴포넌트를 다시 렌더링하도록 유발합니다.
state는 컴포넌트 내부에서만 비공개로 유지되며, 같은 컴포넌트가 여러 번 렌더링될 경우에도 각 인스턴스의 state는 독립적으로 관리됩니다.

🚨 일반 변수를 state 대신 사용하면 안되나요?

YES. 대신 사용할 수 없습니다.

[ 사용할 수 없는 이유 ]
1. 지역 변수는 렌더링 간에 유지 ❌
React는 이 컴포넌트를 두 번째로 렌더링할 때 지역 변수의 이전 값을 기억하지 못한다.
2. 지역 변수를 변경해도 렌더링 유발 ❌
React는 새로운 데이터로 컴포넌트를 다시 렌더링해야 한다는 것을 인식하지 못한다.

useState 훅은 이 두 가지를 제공한다.

  1. 렌더링 간에 데이터를 유지하기 위한 state 변수
  2. 변수를 업데이트하고 React가 컴포넌트를 다시 렌더링하도록 유발하는 state setter 함수

📘 reference

댓글남기기