React Props 개요

props란 무엇일까?

컴포넌트 끼리의 정보교환 방식!
부모 컴포넌트가 자식 컴포넌트에게 건네준 데이터이다. 다시 말해, 컴포넌트 간의 정보 교류 방법이다.

1. props는 반드시 위에서 아래 방향으로 흐른다. 즉, 부모 -> 자식방향으로만 흐른다.(단방향)
2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

props로 값 전달하기

ex)

<script>
// src/App.js

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
	const name = '홍부인';
  return <Child motherName={name} />; // 💡"props로 name을 전달했다."
}

function Child(props) {  // props.motherName === "홍부인"
  return <div>연결 성공</div>;
}

export default App;
</script>

예시와 같이 부모 컴포넌트에서 자식 컴포넌트에 props를 전달할 때, 부모 컴포넌트 선언부에서 return이후에 호출된 자식 컴포넌트에 임의의 속성을 부여하고, 속성값으로 전달하고 싶은 변수를 넣으면 된다.
또한 자식 컴포넌트는 자식 컴포넌트의 선언부에서 컴포넌트 매개변수 부분에 임의의 매개변수명을 넣고(일반적으로 'props') 부모 컴포넌트로부터 객체로 된 데이터를 받아올 것임을 명시한다. 부모로부터 받아온 props에 접근할 때는 객체로 된 데이터이기 때문에 매개변수명.부모 컴포넌트 선언부에서 지정한 속성명 혹은 매개변수명[부모 컴포넌트 선언부에서 지정한 속성명]으로 호출 할 수 있다.

prop drilling

위와 같은 props의 성질 때문에 특정 중간다리 역할을 하는 컴포넌트는 최상위 컴포넌트에서 최하위 컴포넌트로 props를 전달만 하는 역할을 할 때도 있고, 그 경로 상에서 props를 건네는 개별적인 단계마다 렌더링이 발생하며, 오류가 발생했을 때, 어느 단계에서 오류가 발생했는지 찾기가 어려운 유지보수적 문제점도 있다.
이러한 현상을 prop drilling이라고 한다. 그리고 이를 방지하기 위해 차후에 'Redux'와 같은 데이터 상태관리 툴을 배우게 된다.