[React] Props란?

다음 HTML 태그에서 src와 같은 속성을 지정하듯이, 우리가 만든 컴포넌트에 어떻게 속성값을 부여할까?

<img src="image.jpg" width="100" height="100">

 

Props란 ?

Props는 React에서 Properties의 줄임말로, 리액트는 컴포넌트에 속성값을 Props를 통해서 전달한다 .

React 컴포넌트에서는 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있다.

// App.js
import React from 'react';
import Toast from './components/Toast';

function App() {
  return (
    <div className="App">
      <Toast title="Props 스터디" />
    </div>
  );
}

export default App;

// Toast.js
const Toast = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
    </div>
  );
};

export default Toast;

Toast.js를 import하여 Toast컴포넌트(자식)를 가져오고 props 값으로 title값을 전달.

 

 

Props를 쿠키틀에 비유한다면?

 

Props의 특징

1. 읽기 전용:

 

• props는 자식 컴포넌트 입장에서 변경이 불가능한 읽기 전용 속성이다. 만약 데이터의 변경이 필요하다면, 부모 컴포넌트에서 변경된 값을 자식에게 전달해야 한다. 자식 컴포넌트는 부모로부터 받은 props를 변경할 수 없으며, 이는 컴포넌트의 예측 가능성을 높이는 중요한 개념이다.

2.부모에서 자식으로 데이터 전달

• props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 방식이다.

 

비구조화 할당 (구조 분해 할당)

ES6에서 도입된 비구조화 할당(구조 분해 할당) 문법을 사용하면, props에서 필요한 값을 더 간편하게 추출할 수 있다.

• 기존 방식:

const Toast = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
    </div>
  );
};

 

• 구조화 할당을 사용한 방식:

const Toast = ({ title }) => {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
};

 

이 방식은 props.title처럼 매번 props 객체에서 값을 추출할 필요 없이, title 값을 바로 사용할 수 있어 코드를 더욱 간결하게 만든다.