[React] props문법, 부모컴포넌트 상태변수를 자식컴포넌트에 전달 및 사용하기

App이라는 컴포넌트안에 이라는 컴포넌트를 만들었다. 이렇게 되면 부모 컴포넌트가 APP, 자식 컴포넌트 Modal 인 부모자식관계가 되는 것이다.

이때 Modal 자식 컴포넌트에서 정의되지 않은 App 부모 컴포넌트 내의 상테변수를 갖고와서 사용하고 싶으면 어떻게 해야할까요?
=> props 문법을 사용하여 갖고와야한다!

props 문법

1. 자식 컴포넌트에 상태변수 전달하기

<자식컴포넌트 전달받을 변수명={state상태변수} /> 
<자식컴포넌트 전달받을 변수명={state상태변수} > </자식컴포넌트> 
 
  ex) <Modal blogName={blogName} />

2. props로 상태변수들을 자식컴포넌트에 전달하기

  function Modal(props){...}

3. 자식 컴포넌트에서 전달받은 상태변수 사용하기

{props.상태변수명}
  
 ex) {props.blogName[0]}

function App() {
  let [blogName, setBlogName] = useState([
    "코딩학원 추천",
    "온라인 코딩 강의 추천",
    "개발 블로그 추천",
  ]);

  .... 코드>

	<Modal blogName={blogName} />     
  ....코드
  }

function Modal(props) {
  return (
    <>
      <div className="modal">
        <h2> 제목 : {props.blogName[0]}</h2>
        <p>까꿍! on 상태입니다!</p>
      </div>
    </>
  );
}

0번째 요소인 코딩학원 추천(App컴포넌트의 상태변수 함수의 0번째 요소)이 modal 창(컴포넌트) 제목에 쏙 들어갔다!