22일차 리액트 입문주차 (Props)

🍎 Props

컴포넌트 간의 정보 교류 방법
부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터.

1. props는 반드시 위에서 아래 방향으로 흐른다.
   [부모] → [자식] 방향으로만 흐른다(단방향)

2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.
   
   

🌱 props로 값 전달하기

function Mother(){
	const name = '엄마'
	return <Child motherName={name}	/>; // "props로 name을 전달했다    
}

//props={motherName:name}
function Child(props){
	return <div>{props.motherName}</div>
}

props란 결국 부모 컴포넌트가 자식에게 넘겨준 데이터들의 묶음이라고 볼 수 있다.

JSX에서도 { } 중괄호를 사용하면 자바스크립트 코드를 사용할 수 있다.

자식 컴포넌트에서는 부모 컴포넌트로 props를 전달할 수 없다.
오직 부모 컴포넌트에서 자식 컴포넌트로만 props를 전달할 수 있다.

🌱 prop drilling

[부모] → [자식] → [그 자식] → [그 자식의 자식]....
이렇게 여러번 데이터를 내려주는걸 prop drilling, props가 아래로 뚫고 내려간다.라고 한다.
문제점: 컴포넌트가 몇 십개라면 중간에 오류가 났을때 찾기 어려움.