리액트의 state를 업데이트하여 화면에 기록하고 보여주는 방법에 관해 공부하였습니다.

• 화면에 특정 정보를 기억하게 하고 싶은 경우 상태를 관리하는 useState(훅)를 사용합니다.

• 예) 화면에 버튼이 클릭 된 횟수를 기록하는 경우

  1. React에서 useState를 가져옵니다.(import)
  2. 그 후에 함수 내부에 state 변수를 선언할 수 있습니다.
  3. 상태를 나타내는 변수 count, 상태를 변경하는 함수 setCount가 들어갑니다.

  4. 일반적으로 [something, setSomething] 과 같은 형식으로 이름을 짓습니다.

  5. useState(0)으로 설정하면 처음엔 0이 전달되지만, 상태(state)를 변경하고 싶다면 setCount를 호출하면 됩니다.

• 동일한 컴포넌트라도 여러 번 렌더링 하면 각각 고유한 state를 가지고 업데이트 됩니다.

• 따라서 두 개의 버튼을 렌더링 했다면 각각 고유한 state를 가집니다. 각 버튼의 count가 개별적으로 증가합니다.

참고

• 링크: https://react-ko.dev/learn#responding-to-events