React 기본 : React Hooks의 개념

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

 

 

지금까지의 React는 Class형 Component로 된 내역을 공부해 보있습니다. 하지만 최근 React에서는 Class보다는 Hooks라는 작업으로 변하고 있다고 합니다. 대표적인 구축 사이트는 facebook 입니다. 따라서 Hooks가 과연 어떤것인지 이해를 하고 넘어가야 될 것 같습니다. 

 

▒ Hooks  정의

 

Hooks는 Class형에서 전체 객체를 state로 정의하고 setState로 선언한 방식에서 함수형 Component를 따르면서 각각을 별도로 정의하여 진행하는 방식이라고 볼 수 있습니다. 문장으로는 잘 이해가 가지 않습니다만 지난 시간 구구딘 형식을 빌려 차이점을 확인하도록 하겠습니다. 

 

▶ 함수형 Component의 형태를 띄고 있다. 

 

함수형 Component는 다음과 같이 나타낼 수 있습니다. 

 

 

Class형에서는 class GuGu extends React.Component { constructor(props) {super(props);} }의 구조를 따랐으나 함수형 Component에서는 const GuGu = ( ) => { return }의 단순한 형태로 기본틀이 간단해 졌고 함수의 구조를 따른다고 합니다. 

 

▶ 객체가 아닌 개별 state를 정의하고  useState(  )함수를 사용한다.

 

Hooks에서는 각 항목들을 별도로 모두 정의하고 useState(  )함수를 사용하여 실행시킵니다. 구구단에서는 첫번째 두번째 random하게 숫자를 불러오고 입력되는 값을 Value로 하고 결과값을 Result로 하였습니다. 다음과 같이 state를 사용하여 전체를 정의하였습니다. 

 

Class형 

 

Hooks 에서는 다음과 같이 나타냅니다. 

 

Hooks 형

 

Class형에서는 this.state = {   } 안에 전체 객체형으로 묶어주었지만 Hooks에서는 말 그대로 개별로 정의하고 진행합니다. 예를 들어 첫번째 random숫자가 first로 정의되면 같은 배열안데 setFirst로 선언해야 Hooks의 기본이 됩니다. 여기서 setFirst의 역할은 Class형에서 setState와 같은 역할을 합니다. 

 

▶ return 내용은 JSX의 중괄호 {  }를 사용하여 나타낸다.

 

다음과 같이 return의 내용을 수정하고 브라우저를 보도록 하겠습니다. 

 

 

다음 브라우저에는 임의의 숫자가 2개가 나타납니다. 

 

 

 

▶ 결론적으로 useState처럼 use로 시작되는 함수형 Component의 구조가 Hooks 라고 보면 됩니다.

    Class형 Component보다 간결한 코딩을 가지고 있다고 보면 되겠습니다. 

 

 

다음시간에는 지난시간까지 Class형으로 만들어 본 구구단을 Hooks로 변환시켜 봐서 어떤 장점이 있는지 좀 더 확인을 해 보도록 하겠습니다.