React 기본 : Class형 끝말잇기 Hooks로 전환

본 내용은 ZeroCho TV의 React 무료강의를 기본으로 하고 있습니다. 

 

 

이제 지난시간 Webpack 폴더까지 같은 내용을 복사하여 새로운 폴더를 만들어 보았습니다. 여기서 필요한 파일을 수정하면서 Class형 Component로 만들어진 끝말잇기 게임을 React Hooks로 전환하는 방법을 공부헤 보도록 하겠습니다. 

 

그럼 Hooks로 바꾸는 파일은 WordRelay.jsx입니다. 

일전에 구구단을 Hooks로 바꾸었을때 기본 내역을 생각하고 정리를 해 보도록 하겠습니다.

 

▒ Hooks의 기본원칙

 

① Component 부분을 함수화 시킨다. 

 

class 를 const로 바꾸고 Component는 없앱니다. 

 

예를 들어 const WordRelay = (  ) => {          }; 이 기본틀이 됩니다. 

 

② state는 useState로 바꾸되 개별로 바꾼다.

 

예를 들어 끝말잇기에 사용되는 state내용은 word, value, result 3가지 항목이었습니다. 개별로 바꾼다는 의미는 word를 예를 들면,

 

const [word, setWord] = useState("사탕");

 

상기와 같이 바꿀수가 있습니다. 

 

③ useRef 선언하기

 

Class 형 Component에서는 onRefInput을 사용하였기 때문에 함수형에서는 다음과 같이 표시합니다.  

 

const inputRef = useRef(null) 로 WordRelay 함수안에 선언하고 기존에 ref로 사용되었던 위치에 inputRef로 변경해 줍니다. 

 

④ class method들은 Hooks에서는 변수로 변경

 

예를들어 onSubmitForm이라든지 onChangeInput등을 변수를 만들기 위해서 앞에 const를 붙혀줍니다. 

 

 

⑤ this.state는 사용하지 않음

 

this를 사용하지 않기때문에 this.state.word로 되어 있으면 word만 표시합니다. 

 

 

⑥ inputRef.current 구문 사용

 

Hooks에서는 항상 Ref에 current를 붙혀줘야합니다. 

 

 

 

▒ Class형 끝말잇기를 Hooks로 변환

 

이제 상기 Hooks의 기본원칙에 입각하여 이제껏 class형으로 만들어 본 끝말잇기 class형 프로그램을 Hooks로 변환해 보겠습니다. 

 

WordRelay.jsx에서 작업을 합니다. 

 

나중에 확인해서 이해하기 쉽게 위쪽 그림은 class형 아래쪽 그림은 Hooks로 비교해서 상기 Hooks의 기본원칙에 따라 정리를 해보도록 하겠습니다. 

 

① Component 부분을 함수화

② state는 useState로 바꾸되 개별로

 

class

 

Hooks

 

③ useRef 선언

 

Hooks

 

변수 inputRef 적용

 

class

 

 

 

④ class method들은 Hooks에서는 변수로 만들고 render( ) 삭제하고 바로 return ( )

 

Hooks

 

 

⑤ this.state는 사용하지 않음

 

class

 

Hooks

 

class method에서 this 사용하지 않음

 

class

 

Hooks

 

 

일단 webpack을 실행하기전 전반적으로 볼 때 Hooks가 class형보다 코드의 양이 줄어든 것을 볼 수 있습니다. 향후 복잡한 프로그램을 코딩한다는 가정하에 가벼운 프로그램이 추세이긴하나 어느 방식이 개인에게 맞는지 고민해봐야 할 듯 합니다. 

 

다음 시간에는 실행해보고 에러가 있으면 원인을 파악해서 수정하는 시간을 갖도록 해보자구요.