React - State, Hook

최근 배운 리액트에서 state란 개념에 대해 공부하였다. 동적인 웹을 만들기 위해서는 리액트에서 state를 잘 활용하는 것이 매우 중요하다고 생각하여 공식 문서를 통해 공부한 내용을 기록해 본다.

state란 리액트 컴포넌트의 상태를 다룰 때 사용하는 하는 자바스크립트 객체이다.

이것이 뭔말인고 하니.. 간단히 말하자면 컴포넌트 내에서 사용하는 상태 관리 변수라고 볼 수 있다.
값이 변경되는 값을 지정해 주고자 할 때 setState를 사용하여 값을 변경하여 사용할 수 있다.

여기서 state는 변할 수 없는 읽기 전용 객체이고 따라서 state를 직접 변경하는 것이 아닌 setState 함수를 사용해 새 객체를 만들어 값을 넣어 주는 형식이다. setState를 통해 값을 변경할 경우 이를 파악하여 해당 부분을 재렌더링한다.

앞서 state의 개념에 대해 짧게 알아보았다. state를 다루기 위해서는 React 16.8 버전 이전까지는 클래스 컴포넌트 내에서만 사용가능 하였다. 하지만 16.8 버전부터 클래스를 사용하지 않고도 Hook을 사용해 함수 컴포넌트에서도 state를 쉽고 간단하게 다룰 수 있게 되었다.

함수 컴포넌트에서 state를 다루기 위해서는 useState라는 Hook 을 사용하여 보여줄 수 있다.

Hook?

React Hook이란 함수 컴포넌트 내에서 클래스 컴포넌트에서 사용할 수 있는 것들(state, lifecycle 제어 등)을 할 수 있도록 하는 일종의 라이브러리이다. Hook의 종류에는 useState, useEffect 등 여러가지가 있다.

useState 사용법

함수 컴포넌트 내에서 useState를 사용하는 방법은 다음과 같다.

import { useState } from 'react';

function MyState() {
    const [state, setState] = useState(initialState);
}

여기서 중요한 것이 위와 같은 useState 같은 훅을 사용시에 반복문이나, 조건문과 같은 곳에서 호출하면 안되고 항상 최상위 단계에서 호출 해서 사용해야한다. 훅은 호출 순서에 의존하여 반복문과 같은 곳에 사용할 경우 버그가 발생할 수 있다.

좀 더 코드를 살펴보자.

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

위의 코드는 버튼을 클릭시 handleClick 함수가 호출되고 setCount 함수를 통해 count값이 변경되는 값을 재렌더링하는 코드이다.
여기서 주의해야할 점은 handleClick() 함수 컴포넌트 내에서 setCount(count + 1);를 여러번 호출하여도 한번 클릭시 결과는 count + 1의 값만 변경된다는 점이다.

그 이유는 리액트의 렌더링 동작 방식의 이유가 있는데 리액트는 하나의 함수 컴포넌트 내에서 state 변경시에 마지막에 한꺼번에 변경한다는 점이다.

따라서 이를 해결하기 위해서는 업데이터 함수를 전달하여 사용해 해결 할 수 있다.

function handleClick() {
    setCount(a => a + 1);
    setCount(a => a + 1);
    setCount(a => a + 1);
}

다음과 같이 a => a + 1과 같이 보류 상태를 가져와서 다음 상태를 계산하겠끔 구현할 수 있다.

또 주의해야할 점은 useState에서 초기화 함수 사용시 useState(initialState()) 와 같이 사용할 경우 재랜더링시에 초기화함수도 실행되어 비효율적이다. useState(initialState) 와 같이 사용하면 초기화시에만 실행되고 이후 다시 실행되지 않게 할 수 있다.

함수 컴포넌트에서 useState의 전반적인 내용과 사용법에 대하여 알아보았다. hook은 리액트로 개발 할때 많이 사용하는 기능이므로 많이 연습해서 숙달시키자!