리액트의 Hook을 알아보자!

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <div className="container">
    <h1>0</h1>
    <button>+</button>
  </div>,
  document.getElementById("root")
);

오른쪽과 같은 UI가 있다. + 버튼을 누를 때마다 숫자가 하나씩 올라가게 만들어 보자!

 

왼쪽과 같은 html 코드로는 이 기능을 만들 수 없다.

 

증가되야하는 숫자를 변수로 만들고 +버튼이 눌릴 때마다 숫자를 올려주는 메서드를 만들면 될 거 같다!

import React from "react";
import ReactDOM from "react-dom";

var count = 0;

function increase() {
  count++;
  console.log("클릭!");
}

ReactDOM.render(
  <div className="container">
    <h1>{count}</h1>
    <button onClick={increase}>+</button>
  </div>,
  document.getElementById("root")
);

 

count 변수에 0으로 초기화를 해주고 increase() 메서드로 count를 증가시켜 주었다.

 

그리고 +버튼에도 이벤트 설정을 해주었다. 클릭이 생길 때마다 콘솔에는 클릭!이라고 찍힐 것이다.

위 사진과 같이 콘솔에는 버튼이 눌리면 클릭!이라고 찍히고 count도 증가한 값이 1이 찍힌다.

 

하지만 화면 속 숫자에는 변화가 없다. 

 

이유는 화면에 나와있는 요소들은 ReactDOM에 의해 렌더링 된 것들이므로 화면 속 숫자에도 변화를 주고 싶다면 다시 렌더링을 해야 한다.

import React from "react";
import ReactDOM from "react-dom";

var count = 0;

function increase() {
  count++;
  ReactDOM.render(
    <div className="container">
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
    </div>,
    document.getElementById("root")
  );
}

ReactDOM.render(
  <div className="container">
    <h1>{count}</h1>
    <button onClick={increase}>+</button>
  </div>,
  document.getElementById("root")
);

 

increase 메서드에서 다시 렌더링을 하면 왼쪽 그림처럼 화면 속 숫자에도 변화가 생기지만 이건 상당히 비효율적이다.

 

리액트에서는 Hook이라는 기능을 제공하는데 useStat()를 통해서 렌더링을 다시 하지 않고 화면 속 요소에 변화를 줄 수 있다.

 

useState()를 사용하는데 조건이 하나 있는데 반드시 함수 컴포넌트 안에서 사용해야한다는 것이다.

 

바로 예시 코드로 알아보자!!

 

우선 App이라는 컴포넌트를 만들어 주었다.

import React, { useState } from "react"; //useState 메서드 import

function App() {
  const [count, setCount] = useState(0);

  function increase() {
    setCount(count + 1);
  }
  return (
    <div className="container">
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
    </div>
  );
}

export default App;

위 코드를 하나씩 살펴보면

 

먼저 useState 메서드를 Import 해주었다. React.useState() 이런 형식으로도 사용이 가능하지만 보다 편리하게 사용하기 위해 import 해주었다.

 

그리고 처음 보는 부분이 있다. 

const [count, setCount] = useState(0);

위와 같은 변수 선언을 구조 분해 할당(destructuring)이라고 한다. 

 

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

이라고 MDN에서 설명해준다.

 

간단히 설명하자면 useState()의 리턴값은 2개의 요소를 가지고 있는 배열이다.

 

배열의 첫번째 요소는 count에 두 번째 요소는 setCount에 담아주겠다는 말이다.

 

그리고 useState()에 0이 파라미터로 담겨있다. 이건 시작 값을 담아주는 건데 지금 우리에게 필요한 건 +버튼을 누를 때 0부터 숫자가 하나씩 올라가야 하기 때문에 0으로 세팅했다.

 

이렇게 완성된 코드는 다시 렌더링 할 필요없이 정상적으로 숫자를 증가시켜주게 된다!!!