[React 입문] Props의 개요

1. props 개념

- 컴포넌트 간의 정보 교류 방법

- 부모 컴포넌트에서 자식에게 넘겨준 데이터들의 묶음 (객체) 

 

 

2, props를 통해 부모->자식으로 값 전달 

- ★부모에서 자식으로만 가능 ★

- ★읽기전용 + 변경 불가능 ★  

 

 

3 자식 컴포넌트에서 부모에게 받은 값 렌더링 가능

import React from  'react';

function App(){

 function Child(props){
   return <div> {props.grandFatherName} </div> //"엄마"
 }

 function Mother(props){
  return <Child grandFatherName = {props.grandFatherName} />; // props로 name전달함
 
 }

 function GrandFather(){
  const papaName ="홍길동";
  return <Mother grandFatherName = {name} />; // props로 name전달함
 }

 return (
    return <GrandFather/>;
 );
}

export default App;

 

4. prop drilling 

- props가 아래로 뚫고 내려간다는 의미로

[부모] > [자식] > [그 자식] > [ 그 자식의 자식] .....이렇게 내려가야함 (유지보수 측면에서 어려움)

이와 같은 패턴을 피하기 위해서는 'Redux'로 데이터 상태관리 툴을 배워야함.