[Legacy][React] 중요한 변수는 state로 관리하자 (useState)

[React] 중요한 변수는 state로 관리하자 (useState)

이전 게시글에서 이어지는 내용입니다. 이전 게시글을 보지 않았다면 확인하세요. 이동하기

이번 게시글에서는 React에서 중요한 변수는 state로 관리하는 방법을 알아보겠습니다. 실습을 진행하다 아래와 같은 에러가 표시되는 경우 참고하세요.

에러 해결하기

혹시 실습을 진행하는 데 아래 에러가 표시되면 해당 package를 설치해주어야 합니다.

설치 명령어 : yarn add @emotion/react or npm install @emotion/react

설치 명령어 : yarn add @emotion/styled or npm install @emotion/styled

useState

react에서 중요한 변수는 state로 관리하곤 합니다. state도 일반 변수와 똑같습니다. 그런데 왜 굳이 state로 관리할까? 이유는 렌더링에 있습니다. React에서 state 값이 변경되면 렌더링이 되어 화면이 새로 그려집니다. 한번 state를 사용하여 알아보도록 하겠습니다.

■ useState 사용하기

useState는 다음과 같이 사용할 수 있습니다.

const [state, setState] = useState(initValue);

위 코드를 보면 state, setState, useState, initValue가 있습니다. 여기서 useState는 react에서 기본으로 제공하는 hook입니다. 간단하게 기본으로 제공하는 함수라고 생각하시면 되는데요. 이 함수가 실행되면 return 값으로 배열을 넘겨주는데 배열의 첫번째 요소가 state, 두번째 요소가 setState 여기서 initValue 값을 넘겨주면 state 값을 initValue로 초기설정하여 return 해줍니다. 이해가 되었을까요? 간단하게 예를들어보면

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

위 코드에서 state : count, setState : setCount, initValue : 0 이라는 것을 확인할 수 있습니다. state는 우리가 만든 중요한 변수, setState는 변수 값을 변경하는 함수라고 이해하시면 됩니다. 즉 count 값을 변경시키고 싶으면 setCount 함수를 이용하여 변경하여야 합니다. 이해가 잘 되셨을까요? 이해가 안된 경우도 실습을 통해 이해해봅시다.

■ useState 실습

기존 프로젝트 폴더 구조에서 아래 구조처럼 변경해줍니다. 그리고 State.js와 App.js 코드를 변경해줍니다.

State.js

import { Button } from "@mui/material";
import { useState } from "react";

let cnt = 0; // 일반 변수 cnt

const State = () => {
  const [count, setCount] = useState(0); // count state 생성

  // state 값이 변경되면 렌더링 됨, 렌더링 되면 console 출력이 됨.
  console.log(`렌더링 count : ${count}, cnt : ${cnt}`);

  return (
    <div>
      <Button
        variant="contained"
        onClick={() => {
          setCount(count + 1);
        }}
      >
        state count 변경
      </Button>
      <Button
        variant="contained"
        onClick={() => {
          cnt += 1;
        }}
      >
        일반 count 변경
      </Button>
    </div>
  );
};

export default State;

App.js

import State from "components/State";

const App = () => {
  return (
    <div>
      <State />
    </div>
  );
};
export default App;

App.js 코드는 딱히 설명할 내용이 없습니다. 그냥 State.js 내의 State 컴포넌트를 import 했습니다. State.js 코드도 주석으로 설명을 적어놓았습니다. 해당 코드를 작성한 이유는 state를 사용하면 렌더링이 된다고 했는데 정말될까? 그리고 일반 변수를 사용하면 렌더링이 안된다고 했는데 정말 안될까? 이 2가지 궁금증을 해결하기 위한 코드입니다. 위 코드를 실행하면 아래와 같은 화면이 나옵니다.

버튼 2개가 있는데 1개는 state를 변경하는 버튼, 나머지 1개는 일반 변수를 변경하는 버튼입니다. 아래 결과 이미지는 state 변경 1번, 일반 변경 2번, state 변경 1번을 진행한 결과입니다.

즉, state 변경이 이루어 진 경우에만 console이 표시되고 일반 변수가 변경이 이루어진 경우 값만 변경되고 렌더링이 되지 않습니다. 이걸 잘 생각하시고 state와 일반 변수를 사용하면 됩니다.

 

이번 게시글은 여기까지입니다. 간단하게 정리하자면 일반 변수를 사용하지 말라는 것이 아닙니다. 렌더링에 필요한 변수는 state, 필요 없는 변수는 일반 변수로 사용하면 된다 입니다. 잘 되지 않는 경우 해당 github 주소에 들어가셔서 자신의 코드와 비교해보세요. 이동하기

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.