리액트에서 state를 사용하여 상태관리하는 이유

리액트에서 state를 사용하여 상태를 관리하는 이유를 리액트 공식문서를 기준으로 정리해보았다.

가장 큰 이유는 아래의 2가지이며, 그 외에 각 컴포넌트별로 private한 state관리라는 추가적인 특성을 아래에 +로 정리하였다.

 

 

🖥 React에서 state 사용이유

1. 지역변수는 렌더링 간에 유지되지 않아서

2. 지역변수변경은 렌더링을 발동시키지 않아서

 

 

state를 사용하지 않고 아래와 같은 방법으로 리액트에서 index라는 변수를 변화시키고자 한다면, UI에는 아무런 변화가 나타나지 않는다.

import { sculptureList } from './data.js';

export default function Gallery() {
  let index = 0;

  function handleClick() {
    index = index + 1;
    console.log(index)
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleClick}>
        Next
      </button>
      <h2>
        <i>{sculpture.name} </i> 
        by {sculpture.artist}
      </h2>
      <h3>  
        ({index + 1} of {sculptureList.length})
      </h3>
      <img 
        src={sculpture.url} 
        alt={sculpture.alt}
      />
      <p>
        {sculpture.description}
      </p>
    </>
  );
}

 

버튼을 계속해서 눌러도 아래와 같은 결과가 나온다. 

console.log를 이용해서 index값을 확인하면 아래와 같이 +1이 되는 것을 확인할 수 있다.

(지역변수안에 console을 찍었기때문에 +1이 되는것이며, 만약 console을 지역변수 밖에 적으면 값은 0이 나온다)

 

하지만, UI 변화는 일어나지 않았다. 

이유가 뭘까?

 

➡️ 지역변수는 렌더링을 발동시키지 않기때문에. (리렌더링이 일어나지 않아서)

      UI변화가 일어나지 않는 것이다!!

 

 

 

 

위와 같은 2가지 문제점을 해결하기 위해서 state를 사용한다.

state변수: 렌더링 사이에 데이터를 유지한다. 저장한 값을 갖는다.

setState함수: 변수를 업데이트하고 React가 컴포넌트를 다시 렌더링하도록 촉발한다. 리렌더링 촉발

 

 

상태를 저장하여 리렌더링이후에도 이전의 값을 기억하기 위해서 state변수를 사용한다. 이 변수에 저장할 값을 담는다.

그리고 setState함수를 이용하여 값을 변화시키고 리렌더링을 촉발시킨다.

 

이렇게 하면, 리렌더링이 일어난 이후에도 index안의 값을 기억하여 UI에 띄워줄 것이다.

(useState안에는 초기값이 들어간다)

 

사실, state가 변하면 리렌더링이 촉발된다는 것은 알고 있었다. 

이걸 바꿔말하면 위와 같이 setState함수가 리렌더링을 촉발한다와 같다고 할 수 있다.

setter함수가 리렌더링을 촉발시킨다 = state변화는 리렌더링을 촉발시킨다.

 

위의 코드를 리렌더링을 촉발시키고, 이전의 값을 기억하는 state를 이용한 코드로 바꾸면 아래와 같다.

 

 

✅ state를 사용한 코드로 변경

import { useState } from 'react';
import { sculptureList } from './data.js';

export default function Gallery() {
  const [index, setIndex] = useState(0);

  function handleClick() {
    setIndex(index + 1);
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleClick}>
        Next
      </button>
      <h2>
        <i>{sculpture.name} </i> 
        by {sculpture.artist}
      </h2>
      <h3>  
        ({index + 1} of {sculptureList.length})
      </h3>
      <img 
        src={sculpture.url} 
        alt={sculpture.alt}
      />
      <p>
        {sculpture.description}
      </p>
    </>
  );
}

 

 

이렇게 코드를 바꾸고 눌러보면 아래와 같이 정상적으로 다음 페이지로 넘어가는 것을 확인할 수 있다.

 

 

 

 

✚ state는 각 컴포넌트별로 프라이빗하다

동일한 컴포넌트를 두 군데에서 렌더링하면 각 사본은 완전히 격리된 state를 갖는다.

import Gallery from './Gallery.js';

export default function Page() {
  return (
    <div className="Page">
      <Gallery />
      <Gallery />
    </div>
  );
}

 

위의 코드는 아래와 같이 각각 다른 state를 갖는다.

(하나가 바뀐다고 다른 하나도 함께 바뀌는 것이 아님)

 

 

 

 

🖋 정리

리액트에서는 state를 사용함으로써,

1. 리렌더링 이후에도 이전의 값을 기억하고

2. state변화시 리렌더링을 촉발하며

3. 각 컴포넌트별로 고유한 state를 가질 수 있다.

 

 

 

 

 

 

참고자료

리액트 공식문서

 

더 자세한 내용은 공식문서에 나와있다.

공식문서에서는 위의 코드를 직접 바꿔보면서 UI에 어떻게 뜨는지 바로바로 확인하면서 공부할 수 있어서 추천한다.