📚 Reference

• 공식 문서 1
• 참고 자료 1
• 참고 자료 2

📜 Chapter

Troubleshooting

Closure

useRef

useReducer

useMemo

useState

• useState

• useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook이다.

• useState는 React에서 상태(state)를 관리하는 가장 기본적인 훅이다.

• 컴포넌트 내부에서 변수가 변경될 때마다 화면이 다시 렌더링되도록 만들어 준다.

• useState가 변하면 component를 렌더링 시킨다.

• useState는 2개를 준다.

• 첫 번째는 value, 두 번째는 이를 변경하는 방법

• useState가 주는 것이 array이다. (useState는 배열을 반환)

  • 배열의 첫 번째 요소는 <상태 값 저장 변수> → state
  • 배열의 두 번째 요소는 <상태 값 갱신 함수> → setState

  // 배열을 비구조화 할당으로 사용
  const [state, setState] = useState(initialState);
  

  • setState가 state를 변경 시키지 않는다.
  • state를 const로 선언했기 때문에 값이 변하지 않는다.

• useState를 사용할 때 상태가 null 일수도 있고 아닐 수도 있을 때, Generics을 활용한다.

용도

• 컴포넌트의 특정 값이 변경될 때마다 UI를 업데이트해야 할 때 사용한다.