React 기본 : React Hooks로 구구단 만들기

본 Summary는 ZeoCho TV 무료 웹강의를 기본으로 정리한 내역입니다. 

 

 

Class형으로 만들어진 구구단과 Hooks로 만들어진 구구단의 코딩 내역을 보면서 두 코딩간의 차이점과 장단점을 보고자 합니다. 

 

지난시간 Hooks를 사용하기 위해 함수형 Component 형태로 다음과 같이 state를 구성하였습니다. 

 

 

상기 그림을 다시 설명하면 함수형 Component의 이름은 GuGu로 하고 각각의 객체를 별도로 정의하였습니다. 브라우저로 확인을 하면 첫번째와 두번째수가  랜덤하게 화면에 표시되며 Value와 Result는 공백으로 화면에 표시되지 않습니다. 한번에 객체러 묶은 setState가 없어지고 각각 분리하여 setFirst, setSecond등으로 나뉘어져 있습니다. 

 

이제부터 return(  )함수값을 정의를 하도록 하겠습니다. 

 

기본 구조는 Class 형에서 봤던것 처럼 다음과 같은 기본구조를 띕니다. 

 

 

역시 Hooks의 형태에서도 form 태그안에는 onSubmit이 정리되어야하고 input 태그안에는 onChange가 정리되어야 합니다. 

 

여기서는 Class가 없기때문에 Class Method를 사용할수가 없습니다. 대신 const를 이용하여 함수형처럼 꾸며주면 된다고 합니다. 

 

 

onChangeIn이라는 함수형 변수(onChangeIn)를 통해서 정의된 수식을 onChange = {onChangeIn}으로 묶어주었습니다.  Class형에서는 setState를 다음과 같이 사용했었습니다. 

 

참고

 

그럼 onSubmit 도 같은 개념으로 만들어 보겠습니다. 

 

하나 명심할점은 setState대신 각각이 setState역할을 한다는 겁니다. 다음 그림처럼 기본 프레임은 같습니다. 

 

 

 

 

중괄호안에 Class형에서 만들어 본 내역을 적용합니다. Class형시간에는 아래와 같이 코딩하였습니다. 

 

 

위 코딩을 그대로 onSubmitForm네 반영을 하는데 setState 대신 각각의 set내역을 반영해 줍니다. 

 

 

그런데 this.input.focus(  )는 Class형에서 사용된 규칙으로 Hooks에서는 ref ={  }를 정의할 때 React.useState(  ) 함수를 사용하고 this.input.focus(  )대신 ref변수명.current.focus(  )로 나타냅니다. 

 

다음 코딩을 참조하세요.

 

 

※ 최종 코딩 수정 

 

코딩을 하다보면 대문자 소문자 구분에서 실수하는 경우와 Class형 형식을 사용하는 경우 등이 발생됩니다. 특히 저처럼 초보 학습자 입장에서는 더더욱 그렇습니다. 

 

항상 천천히 이해하면서 진행하는게 가장 좋은 방법이라고 생각됩니다. 

 

코딩에 대한 브라우저는 다음과 같이 Class형에서 봤던 내용과 같이 나옵니다. 

 

 

 

아직까지는 알다가도 모를 것 같은 느낌입니다. 한번 더 진도 나가보는 것으로 하겠습니다.