리액트 React | 컴포넌트 간 데이터 전달을 위한 속성(props)

 

✅ 속성(Props)

React는 컴포넌트 간에 데이터를 전달하는 메커니즘으로 속성(Props)을 제공합니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. Props는 읽기 전용이므로 하위 컴포넌트에서는 Props 값을 수정할 수 없습니다. 데이터는 항상 상위 컴포넌트에서 하위 컴포넌트로만 흐르기 때문에 Props를 사용하여 컴포넌트에 필요한 데이터와 이벤트 핸들러를 전달할 수 있습니다.

 

💡 속성(Props)의 읽기 전용성

React 컴포넌트에서 함수형 컴포넌트나 클래스형 컴포넌트 모두 Props는 읽기 전용입니다. 함수형 컴포넌트에서는 Props를 함수의 매개변수로 받아와 사용하며, 클래스형 컴포넌트에서는 this.props를 통해 Props를 사용합니다. Props는 항상 동일한 값을 유지하여 순수 함수처럼 동작해야 합니다.

---

예를 들어, 다음은 순수 함수인 sum 함수입니다.

function sum(a, b) {
  return a + b;
}

---

하지만 다음 함수는 입력값을 변경하므로 순수 함수가 아닙니다.

function withdraw(account, amount) {
  account.total -= amount;
}

---

React는 매우 유연하지만, Props에 대한 엄격한 규칙이 있습니다. 모든 React 컴포넌트는 Props를 다룰 때 순수 함수처럼 동작해야 합니다. 이 규칙을 준수하여 Props를 사용하면 애플리케이션 UI를 동적으로 업데이트할 수 있습니다.

 

💡 함수형 컴포넌트에서 Props 사용하기

함수형 컴포넌트에서 Props를 사용하려면 Props를 함수의 매개변수로 받아와서 사용하면 됩니다.

// Welcome 함수형 컴포넌트는 props를 매개변수로 받아와 사용합니다.
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때는 태그의 속성으로 값을 넘겨줍니다.
const element = <Welcome name="Alice" />;

 

💡 클래스형 컴포넌트에서 Props 사용하기

클래스형 컴포넌트에서는 this.props를 통해 Props를 사용합니다.

// Welcome 클래스형 컴포넌트에서는 this.props를 통해 props를 사용합니다.
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때는 태그의 속성으로 값을 넘겨줍니다.
const element = <Welcome name="Alice" />;

 

✅ Props로 컴포넌트에 데이터 전달하기

Props를 사용하여 컴포넌트에 데이터를 전달하는 방법을 알아보겠습니다.

---

App 컴포넌트 내에 Nct 컴포넌트를 사용하고 있습니다. Nct 컴포넌트는 I love Nct라는 문장을 출력합니다. App 컴포넌트에서는 Nct 컴포넌트를 호출할 때 fav라는 이름으로 데이터를 전달하고 있으며, 값으로는 "onetwoseven"을 지정하고 있습니다.

// Nct 컴포넌트 정의
function Nct(props) {
  return <h1>I love Nct {props.fav}</h1>;
}

// App 컴포넌트에서 Nct 컴포넌트를 사용
function App() {
  return (
    <div>
      <h1>슈고링</h1>
      <Nct fav="onetwoseven" />
    </div>
  );
}

---

Props에는 boolean, 숫자, 배열 등 다양한 형태의 데이터를 전달할 수 있습니다. 다만, 문자열을 제외한 다른 타입의 데이터는 중괄호로 값을 감싸야합니다.

<Nct fav="onetwoseven" member={['Taeil', 'Johnny', 'Taeyong', 'Yuta', 'Doyoung', 'Jaehyun', 'Jungwoo', 'Mark', 'Haechan']} />

---

Nct 컴포넌트에서는 전달받은 데이터를 사용하기 위해 props를 인자로 받아옵니다. 인자 이름은 원하는 대로 지정할 수 있으며, props에 전달된 데이터는 객체 형태로 저장됩니다.

function Nct(props) {
  console.log(props);
  return <h1>I love Nct</h1>;
}

---

Nct 컴포넌트에서 전달받은 데이터를 화면에 출력하려면 중괄호를 사용합니다. 객체가 있는 값을 사용하려면 점 연산자를 사용합니다.

function Nct(props) {
  return <h1>I love Nct {props.fav}</h1>;
}

---

여러 개의 컴포넌트에 Props를 사용할 수도 있습니다. 이때 구조 분해 할당을 사용하여 props 객체에 있는 값을 추출할 수 있습니다. 각 컴포넌트에서 전달된 fav Props에 서로 다른 값이 들어있기 때문에, 동일한 컴포넌트를 사용하더라도 다른 문장이 출력됩니다. App 컴포넌트 내에서 Nct 컴포넌트를 세 번 호출하고 있으며, 각각 다른 값을 가진 fav Props를 전달하고 있습니다. 결과적으로 다른 문장이 출력됩니다.

import React from 'react';

function Nct({fav}) {
  return <h1>I love Nct {fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>슈고링</h1>
      <Nct fav="onetwoseven" />
      <Nct fav="dream" />
      <Nct fav="dojaejung" />
    </div>
  );
}

export default App;