[React Hooks] 함수형 컴포넌트 useState 사용 방법

이번 포스팅에서는 리액트 Hooks 중에 useState 함수 사용방법을 알아보겠다.

 

가장 먼저 알아야 할 부분은 왜? useState를 사용하여 상태 관리를 해야 하는지이다.

 

만약 아래와 같은 코드가 있다고 가정해보자.

 

state값 직접 변경

let title = "타이틀 1번입니다.";

return (
    <>
      <button
        type="button"
        onClick={() => {
          title = "타이틀 2번입니다.";
        }}
      >
        타이틀 변경
      </button>
        <span>{title}</span>
    </>
);

 

useState를 사용한 state값 변경

const [title, setTitle] = useState("타이틀 1번입니다.");

return (
    <>
      <button
        type="button"
        onClick={() => {
          setTitle("타이틀 2번입니다.");
        }}
      >
        타이틀 변경
      </button>
      <span>{title}</span>
    </>
);

 

두 개의 코드를 모두 title 값을 바꾼 것은 맞지만, 실제로 실행을 해보면 state 값을 직접 변경한 코드는 화면 렌더링이 다시 되지 않는다. 즉, '타이틀 1번입니다.'라는 문구가 그대로 표시되고 있을 것이다.

 

이것이 우리가 useState를 사용해야 하는 이유이다.

 

반응형

 

그렇다면 왜 이런 현상이 발생하는가?

리액트가 웹 상에 렌더링 되기 위해선 render() 메서드가 실행되어야 한다.
리액트의 컴포넌트는 생성된 후 Mount 상태에서 한 번 render() 메서드를 실행하고, 이후에는 Update 상태에 진입해 shouldComponentUpdate의 값이 true일 때만 render() 메서드를 실행한다.

 

Update 상태에 진입하는 상황

• state 또는 props가 변경
• 부모 컴포넌트가 렌더링
• forceUpdate 사용 시

 

여기서 state를 변경하지 않았나?라고 생각을 하는 사람도 있을 것이다.

 

let title = "abc";
title = "cba";

우리가 위와 같이 변수의 값을 재할당 하더라도 실제 저장된 주소 값이 바뀌지는 않는다.

state도 마찬가지이다.

 

정확하게 말하면, state 값이 아니라 state가 참조하는 주소 값이 변경되어야만 update 상태가 되는 것이다.

useState가 그 역할을 해준다.

 

왜 useState를 사용해야 하는지에 대해 알았으니 이제 useState를 어떻게 사용하는지 한번 알아보자.

 

 

state 선언 및 세팅

선언부는 상단에 주석으로 의미를 표시하였다.

setCount에 인자를 넘기는 방법은 두 가지가 있는데 첫 번째는 count-1과 같이 이미 계산된 값 혹은 상수값을 넘기는 방법이고, 두 번째는 함수를 넘기는 방법이다.

이때 함수를 넘기게 되면 매개변수로 변경 이전 값 즉, 현재 값이 넘어온다.

 

/**
	count: 변수명
	setCount: state를 변경하는 메서드
	useState(0): count의 초기값을 0으로 세팅
*/
const [count, setCount] = useState(0);

return (
    <>
      <button
        type="button"
        onClick={() => {
          // 방법1
          setCount((count) => {
              return count - 1;
          });
          // 방법2
          setCount(count-1);
        }}
      >
        빼기
      </button>
      <span>{count}</span>
      <button
        type="button"
        onClick={() => {
          // 방법1
          setCount((count) => {
              return count + 1;
          });
          // 방법2
          setCount(count+1);
        }}
      >
        더하기
      </button>
    </>
);

 

여기서 주의해야 할 부분은 함수를 인자로 넘겼을 경우에는 상태 값 변경을 배치로 처리하기 때문에 값으로 넘겼을 때와 다르게 반응할 수 있다.

 

onClick 이벤트에 아래 function call을 두 번씩 넣어서 호출을 해보면 알 수 있다.

// onClick
setCount((count) => {
  return count + 1;
});
setCount((count) => {
  return count + 1;
});


// onClick
setCount(count+1);
setCount(count+1);

 

 

checkbox나 input value의 경우 일반적으로 다수로 존재할 경우가 많다.

이런 부분에 대한 사용방법은 다음 포스팅에서 알아보도록 하겠다.

 

그럼.. 도움이 되셨길 바랍니다.