+ 실습
App.jsx class component를 function 컴포넌트로 바꾸고 hook 적용
Player.jsx class component를 function 컴포넌트로 바꾸고 hook 적용
App.jsx 훅 적용
먼저 class component를 function 컴포넌트로 바꾸고 차례대로 적용한다.
class 의 state 선언을 useState 훅으로 전환한다(L2)
componentDidMount 부분을 useEffect 훅으로 전환한다(L4 ~ L11) this.setState 는 setPlayers로 변경(L9).
useState, useEffect 이 두가지 훅은 class 컴포넌트에서 function 컴포넌트로 변경시 필수로 사용해야 하는 훅이다. 나머지 훅들은 주로 성능 개선의 이유로 주로 사용되지만 이 두가지 훅은 반드시 변경해야 한다.
클래스 컴포넌트에서 사용된 함수는 모두 함수 표현식으로 변경한다(L13, L24, L 49). 또한 함수 안에 사용된 this.setState는 모두 setPlayers 함수로 변경한다(L19, L33, L45)
render 함수는 단순히 리턴구문으로 변경한다(L56 ~ L70). this.state 가 사용된 부분은 모두 제거한다(L58). 그리고 함수 호출에서 사용된 this 도 모두 제거한다(L64, L65, L66, L68).
AddPlayerForm.jsx 훅으로 변경
생성자 함수안에 createREf()는 useRef()로 변경(L2, L3).
state 변수는 useState 훅으로 변경(L4)
함수는 함수 표현식으로 모두 변경(L6, L10). 함수 내부에 선언된 this는 모두 삭제한다(L7, L13 ~ L14, L24, L25)
render 함수안에 있는 return문만 가져온다(L30 ~ L49). 내부에 선언된 this는 모두 삭제한다(L32, L33, L36, L39)