클래스 컴포넌트의 state 가 useState로 변경

상태관리를 하기 위해서는 반드시 클래스 컴포넌트가 되어야 했고, 클래스 컴포넌트에서 state 변수를 선언하고 상태를 바꾸기 위해서는 setState 메서드로 변경해야만 했다.

  • 변수 선언

array 해체 할당 문법을 사용하여 각각 count 속성과 setCount 메서드를 받는다. useState(0) 의 0은 초기 count 값이다.

  • 메서드 사용

Q) 다음 클래스 컴포넌트를 useState hooks를 사용하여 바꾸시오.

A)

CodePen

See the Pen react useState Hooks example by LeeDongKee (@eastflag) on CodePen.default

App.jsx에 hooks 적용하기

scoreboard 앱의 App.jsx에 hook을 적용해보자.

useState 훅을 사용시 하나의 변수는 하나씩 할당한다. 만일 state 에 a, b 두가지 상태 변수가 할당 되어있었다면 useState는 두번 선언한다.

state 라는 json에 players라는 키 값에 배열이 선언되었는데 players를 키값을 useState의 변수 이름으로 설정하고 배열 값을 useEffect() 의 값으로 넣는다.

AddPlayerForm에 hooks 적용하기

class 컴포넌트를 먼저 funtion 컴포넌트로 변경하고 변수 부분부터 수정한다.

클래스 멤버 변수나 함수는 let 이나 const 로 변수 선언해서 사용한다.