[React Hooks] useState

1. React Hooks

React Hooks에는 리액트가 제공하는 편리한 기능을 담은 Hook들이 포함되어 있고, useState는 React Hooks 중 하나이다. React Hooks는 컴포넌트를 작성 + 유지하는 동안 부딪혔던 수 많은 문제들을 해결하기 위해 개발되었다.

Hook은 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다.

React가 Hooks를 개발하여 해결하려 했던 주요 문제는 아래와 같다.

1. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다.
2. 복잡한 컴포넌트들은 이해하기 어렵습니다.
3. Class은 사람과 기계를 혼동시킵니다.(ex: this 구문)

React Hooks에 대한 추가적인 정보를 얻고 싶으면 아래 링크에 있는 documents에서 찾아볼 수 있다.

React Hooks
React Hooks 사용 규칙

2. State

useState를 설명하기에 앞서, 리액트의 핵심인 state에 대해 간략하게 설명하겠다.

state는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다. 동적인 데이터를 다룰 때 props보다 state를 사용하는 것이 더 편하기 때문에, props와 state를 상황에 맞게 선택하여 사용해야 한다.

3. useState

useState는 state 생성 및 수정을 위한 리액트 내장 함수이다. useState를 사용하면 state가 업데이트 되었을 때, 페이지 새로고침이나 직접 렌더링을 해줄 필요 없이 자동으로 재렌더링되기 때문에 웹페이지가 스무스하게 동작하게 만들 수 있고 구현이 간단하다.

아래 useState를 사용한 코드와 아닌 코드를 비교해보자.

useState를 사용하지 않은 경우

    const root = document.getElementById("root");
    let counter = 0;
    function countUp() {
      counter += 1;
      render();
    }
    function render() {
      ReactDOM.render(<App />, root);
    }
    const App = () => (
      <div>
        <h3>Total clicks: {counter}</h3>
        <button onClick={countUp}>Click me</button>
      </div>
    );
    render();

useState를 사용한 경우

    const root = document.getElementById("root");
    function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter((prev) => prev + 1);
      };
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);

위에서 언급한 것처럼 useState를 사용한다면 재렌더링을 할 필요가 없고, 코드를 더 간단하게 구현할 수 있다.