리액트에서 props 로 받은 변수는 복사본인가? 아니면 참조인가?

React에서 로 전달받은 변수는 원본 데이터의 복사본이 아닙니다. prop는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터의 **참조(reference)**입니다. 따라서 자식 컴포넌트에서 를 직접 수정하려고 하면 React의 상태 관리 방식과 일관성에 문제가 생길 수 있습니다.

 

위 코드에서 몇 가지 중요한 점을 짚어볼게요:

 

1. props로 받은 변수의 변경
원본 데이터를 참조하고 있으므로, 직접 수정하면 부모 컴포넌트의 상태에 영향을 미칠 수 있습니다.

이는 React에서 권장되지 않는 방식입니다.

 

React의 props는 읽기 전용으로 간주해야 하며, 직접 변경하지 않는 것이 좋습니다. 대신 상태를 업데이트하거나 새로운 객체를 생성하여 변경 사항을 반영해야 합니다. 

 

2. props로 전달받은 상태 업데이트 함수의 역할
props 로 전달된 변수를 객체 스프레드 연산자 를 사용하여 복사본을 생성한 뒤, 이 복사본에 변경 내용을 반영하여 상태를 업데이트합니다. 이렇게 하면 React가 상태 변경을 감지하고 UI를 다시 렌더링할 수 있습니다.

 

3. React의 상태 업데이트 메커니즘
React는 상태를 업데이트할 때 비동기적으로 처리하며, 내부적으로 이전 상태와 새로운 상태를 관리합니다. 이를 통해 컴포넌트의 상태 변경이 UI에 일관성 있게 반영되도록 보장합니다.

 

샘플코드

================================================================

import React, { useState } from "react";

const Component = ({ mbtiScore, setMbtiScore }) => {
  const onOptionClick = (type) => {
    // props 객체를 새로운 객체로 복사
    const updatedScore = { ...mbtiScore };

    // 복사한 객체 수정
    updatedScore[type] += 1;

    // 상태 업데이트 함수 호출
    setMbtiScore(updatedScore);

    // 상태 업데이트 예: 다른 상태와도 연동
    setQuestionNum((prev) => prev + 1);
  };

  return (
    <button onClick={() => onOptionClick("type1")}>
      Increase Score
    </button>
  );
};

export default Component;