[React] React의 State로 객체, 배열 값 사용하기

안녕하세요.

이번에는 React의 State로 객체, 배열을 사용하는 방법에 대하여 알아보겠습니다.

 

1. 객체 또는 배열을 State로 사용하는 경우

• State는 값이 변경되면 리렌더링을 하지만, 원시 타입의 경우에는 변수에 값이 그대로 들어가 있어서 리렌더링이 발생합니다.
• 하지만, 객체 타입을 사용하게 되면 변수에는 메모리 주소 값이 들어가 있으며, 메모리 주소에 접속해야 실제 값이 있기 때문에 State의 입장에서는 메모리 값이 변하지 않는 것으로 보이게 되어 리렌더링이 발생하지 않게 됩니다.

 

• 이번 코드에서 작업한 거는 메모리 주소를 변경한 것이 아니라 메모리 주소에 연결되어 있는 값을 변경한 것이기 때문에 state에서는 값이 그대로 인 것으로 인식하여 리렌더링이 발생하지 않는다.

App.js

import './App.css';
import ArrayState from './components/ArrayState';

function App() {
  return (
    <div className="App">
      <ArrayState />
    </div>
  );
}

export default App;

 

components/ArrayState.js

import React, { useState } from 'react';

export default function ArrayState() {
  // [0] 에는 메모리 주소값이 들어가 있다.
  const [state, setState] = useState([0]);
  console.log(state);
  return (
    <div>
      {state[0]}
      <br />
      <button
        onClick={() => {
          // 여기서 작업한거는 메모리 주소를 변경한 것이 아니라
          // 메모리 주소에 연결되어 있는 값을 변경한 것이기 때문에
          // State에서는 값이 그대로 인것으로 인식하여 리렌더링이 발생하지 않는다.
            state[0] = 1;
            setState(state);
            console.log(state);
        }}
      >
        +1
      </button>
    </div>
  );
}

 

실행결과

 

2. 배열의 새로운 메모리 주소에 할당

• ArrayState.js 파일의 코드를 아래와 같이 새로운 메모리 주소를 할당하면 적용이 되지만 일시적인 해결 방법입니다.

components/ArrayState.js

import React, { useState } from 'react';

export default function ArrayState() {
  // [0] 에는 메모리 주소값이 들어가 있다.
  const [state, setState] = useState([0]);
  console.log(state);
  return (
    <div>
      {state[0]}
      <br />
      <button
        onClick={() => {
          // 해결 방법 - 새로운 메모리 주소를 할당
            state[0] = 1;
            setState([1]);
            console.log(state);
        }}
      >
        +1
      </button>
    </div>
  );
}

 

 

3. 전개연산자 + 새로운 변수 할당

components/ArrayState.js

import React, { useState } from 'react';

export default function ArrayState() {
  // [0] 에는 메모리 주소값이 들어가 있다.
  const [state, setState] = useState([0]);
  console.log(state);
  return (
    <div>
      {state[0]}
      <br />
      <button
        onClick={() => {
          // 전개 연산자 + 새로운 변수 할당
          state[0] = 1;
          // 메모리 값을 변경하면서, 변경되는 값은 제대로 전달하는 방법
          const copyArr = [...state];
          setState(copyArr);
          console.log(copyArr);
        }}
      >
        +1
      </button>
    </div>
  );
}

 

실행결과

 

4. 결과

• 자주 값이 변경되고, 바로 반영해야 하면 State로 선언해서 사용한다.
• 원시 값으로 사용하는 것이 좋다.
• 배열 또는 객체로 사용할 경우, JS의 객체 타입 데이터의 특성을 고려해서 사용한다.

 

이상으로 React의 State 사용방법에 대하여 알아보았습니다.

감사합니다.