리액트 훅 (Reack Hooks) 간단 소개

리액트 훅이란?

훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 해주는 기능이다.

즉, 기존에 훅스가 생기기전에 우리는 state를 함수형 컴포넌트에서 사용할 수 없어서

state를 가지고 작업하고 싶으면 클래스 컴포넌트에서 사용했다.

 

 

그럼... 함수형 컴포넌트와 클래스 컴포넌트의 차이는?

 

생김새부터 찾아봤다.

 

함수형 컴포넌트

const App = () => { return ( ... )  }

 

클래스형 컴포넌트 

class App extends React.Component { render () { return ( ... ) } }

 

위의 코드만 봐도 함수형 컴포넌트가 훨씬 직관적이고 짧다.

 

 

버튼을 누르면 숫자가 증가하는 예제를 통해 조금 더 자세히 알아보자.

 

class App extends React.Component {
	// 초기값 설정
	state = {
    	item : 1
    };
    // 함수에 따른 setState 설정
    increace = () => {
    	this.setState ( state => {
        	return {
            	item: state.item + 1
            }
        })
    };
    decreace = () => {
    	this.setState ( state => {
        	return {
            	item: state.item - 1
            }
        })
    };
    render(){
    	const { item } = this.state;
        return (
        	<>
            	<h1>Hello CodeSandbox {item} </h1>
            	<button onClick={this.increace}>Apps 숫자 증가</button>
          		<button onClick={this.decreace}>Apps 숫자 감소</button>
            </>
        )
    }
}

기존의 클래스 컴포넌트로 상태값을 변화시키려면

state의 값을 증가하기 위한 함수를 만들고 그곳에서 this.setState를 시켜줘야했으며

render 를 통해 this.state 값이 무엇인지 { item }과 같이 정의를 해줘야 돔에서 인지를 하고 숫자를 늘렸다.

 

// useState 연결
import React, { useState } from "react";

const App = () => {
  // 초기값 설정
  const [item, setItem] = useState(1);
  // 함수에 따른 setState 설정
  const increace = () => setItem(item + 1);
  const decreace = () => setItem(item - 1);
  return (
    <div className="App">
      <h1>Hello CodeSandbox {item} </h1>
      <button onClick={increace}>숫자 증가</button>
      <button onClick={decreace}>숫자 감소</button>
    </div>
  );
}

반면에 함수형 컴포넌트로 상태값을 변화시키는 방법은 

const [ 초기값(item), 현 상태 업데이트 할수 있는 함수(setItem) ] = useState();

이렇게 useState를 초기값과 업데이트함수를 미리 지정하여 원하는 기능의 함수에 사용할 수 있다.