Props 전달 과정(부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기)

1. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법: `props`

• 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하려면, `props`라는 특별한 방법을 사용한다.
• `props`는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 필요한 속성이다. 예를 들어, 자식 컴포넌트에 이름이나 나이 같은 정보를 전달하고 싶을 때, `props`로 보낼 수 있다.

React에서 자식 컴포넌트가 props를 매개변수로 받는 이유
https://sodol-dotcom.tistory.com/78

 

 

2. `props`가 객체로 전달되는 이유

• 부모 컴포넌트에서 여러 데이터를 전달하려면 `props`를 객체 형태로 묶어서 보낸다. 이 객체 안에는 전달하려는 데이터가 프로퍼티로 저장되어 있다.
• 예를 들어, `name`과 `age`라는 두 가지 정보를 자식 컴포넌트로 보내면, `props`라는 객체 안에 `name`과 `age`가 각각 프로퍼티로 들어간다.

// 부모 컴포넌트
import "./App.css";
import Button from "./components/Button";

function App() {
  return (
    <>
      <Button text={"메일"} color={"red"} />
      <Button text={"카페"} />
      <Button text={"블로그"} />
    </>
  );
}

export default App;

 

 

3. 자식 컴포넌트에서 `props` 받기

• 자식 컴포넌트는 부모 컴포넌트로부터 전달된 `props`를 받아 사용할 수 있다.
• `props`는 항상 객체로 전달되고, 그 안에 부모가 보낸 데이터가 담겨 있다.

// 자식 컴포넌트
const Button = (props) => {
  console.log(props);
  return <button>{props.text}</button>;
};

export default Button;

 

 

4. `console.log`로 확인

• 자식 컴포넌트에서 `console.log(props)로 확인해 보면, `props`가 하나의 객체로 전달된 것을 확인할 수 있다.
• 이 객체 안에는 부모가 보낸 데이터가 각각 프로퍼티로 들어가 있어서, 자식 컴포넌트는 그 프로퍼티들을 꺼내 사용할 수 있다.

 

 

5. 요약

부모 컴포넌트는 자식 컴포넌트에 여러 데이터를 `props`를 사용해 전달하고, 이 데이터는 객체 형태로 전달된다. 자식 컴포넌트는 이 객체를 받아서 그 안에 있는 데이터를 꺼내 사용할 수 있다. `console.log(prop)`로 확인하면, 객체 안에 전달된 데이터가 프로퍼티로 들어있다는 것을 알 수 있다.