Frameworks & Libraries/React
Props 전달 과정(부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기)
sod0l
2024. 10. 4. 17:57
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)`로 확인하면, 객체 안에 전달된 데이터가 프로퍼티로 들어있다는 것을 알 수 있다.