리액트 컴포넌트의 상태값과 속성값 개념을 구분하여 알자

들어가기전

리액트에서는 UI 데이터를 상태값과 속성값으로 관리를 합니다.

단순한 개념들이지만 이 두 개념을 구분해보도록 하겠습니다.

 

상태값 

상태값은 우리가 흔히 쓰는 setState로 관리하는 값이 상태값입니다.

color 변수는 setColor를 통해 상태값이 바뀌게 됩니다.

import React, { useState } from 'react';
import Counter from './Counter';

export default function App() {
  const [color, setColor] = useState('red'); // 상태값
  function onClick() {
    setColor('blue');
  }
  
  return (
   <button style={{ backgroundColor: color }} onClick={onClick}>
     좋아요
   </button>
  );
}

 

 

속성값 

속성값은 변하지 않는 불변 변수. 부모컴포넌트가 주는 속성값을 'props' 형태로 전달 받습니다. 

import React from 'react';

export default function Title({ title }) {
  return <p>{title}</p>;
}

 

속성값 관리

속성값 관리를 통해 불필요한 렌더링을 방지할 수 있습니다.

예제를 보면 버튼 2개가 있습니다. 

 

[예시 코드]

아래 코드에서는 버튼1을 누르면 count값이 변경되고, count값을 사용하고 있는 <Title />도 렌더링됩니다.

버튼2을 누르면 count2값이 변경되는 것인데, count값을 사용하고 있는 <Title />이 또 렌더링됩니다.

이러한 불필요한 렌더링을 막기 위해 React.memo를 사용합니다.

// Counter.js
import React, { useState } from "react";
import Title from "./Title";

export default function Counter() {
  const [count, setCount] = useState({ value: 0 });
  const [count2, setCount2] = useState(0);
  
  function onClick1() {
    setCount(count + 1);
  } 

   function onClick2() {
     setCount2(count2 + 1);
   }
  return (
    <div>
      <Title title={`현재 카운트: ${count}`} />
      <button onClick={onClick1}>버튼1</button>
      <button onClick={onClick2}>버튼2</button>
    </div>
  );
}

 

[리팩토링 코드]

React.memo를 적용해 주었습니다.

위와 같이 작성하면 속성값이 변경 될때만 Title.js가 렌더링 됩니다.

// Title.js
import React from 'react';

function Title({ title }) {
  return <p>{title}</p>;
}

export default React.memo(Title); //속성값 변경될 때만 렌더링

 

Check Point

1. 상태값과 속성값은 UI를 관리하는 데이터
2. 상태값은 setState로 관리되는 변수.
3. 속성값은 변하지 않는 불변 변수이자 Props형태로 쓰이는 값.
4. 속성값 관리는 React.memo로

 

Ref

실전리액트프로그래밍

MDN