[리액트] props란 무엇일까? (부모 컴포넌트, 자식 컴포넌트)

⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

포스팅에 해당하는 목차는 다음과 같습니다:

3장 컴포넌트

• 3.3 props

 

---

 

Props

props란 자식 컴포넌트의 속성을 설정할 때 부모 컴포넌트에서 전달해주는 데이터를 의미한다.

 

예제를 살펴보기 전에 부모 컴포넌트와 자식 컴포넌트의 개념부터 알아보자.

• 부모 컴포넌트: 자식 컴포넌트를 불러오는 컴포넌트
• 자식 컴포넌트: 부모 컴포넌트에게서 불려온 컴포넌트

 

부모 컴포넌트

부모 컴포넌트(App)에서 자식 컴포넌트(MyComponent)를 불러오고 자식 컴포넌트의 속성을 name={"React"} 설정하였다. 이때 자식 컴포넌트(MyComponent)에서 props 객체를 전달하게 되고 그 객체 안에  name: "React"값이 생긴다.

import React from 'react';
import MyComponent from '../components/MyComponent';

const App = () => {
  return (
    <div>
      <MyComponent name={'React'} />
    </div>
  );
};

export default App;

 

자식 컴포넌트

자식 컴포넌트(MyComponent)가 부모 컴포넌트(App)로부터 받아온 props를 파라미터로 전달해준다. props 객체 안에 name: "React"값이 있으므로 props.name으로 문자열 "React"에 접근해 출력해준다.

import React from 'react';

const MyComponent = props => {
  return <div>Hello I am learning {props.name}</div>;
};

export default MyComponent;

콘솔창에 props값을 출력해보면 부모 컴포넌트에서 설정한 속성이 props안에 객체 형태로 담겨 있다

import React from 'react';

const MyComponent = props => {
  console.log(props);
  return <div>Hello I am learning {props.name}</div>;
};

export default MyComponent;

 

위의 내용을 공부한 결과 props는 다음과 같다

• props란 properties의 줄임말로 부모 컴포넌트가 자식 컴포넌트에게 전달해주는 객체를 의미한다
• 부모 컴포넌트에서 자식 컴포넌트의 속성을 설정할 때 사용하는 요소를 말한다
• 자식 컴포넌트가 부모 컴포넌트한테 전달받은 데이터를 말한다

 

정리

props란 부모 컴포넌트에서 받아오는 값을 의미한다. props를 받아올때 리액트는 리렌더링이 된다.