Props

props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 속성이다.
자식 컴포넌트는 props를 사용하여 자신의 UI를 구성할 수 있다.

1. 부모 컴포넌트에서 Props 전달하기

   • 자식 컴포넌트에 전달하려는 데이터를 Props로 정의한다.
   • 자식 컴포넌트를 사용하는 부모 컴포넌트에서 Props값을 설정하여 전달한다.

   // ParentComponent.js
   import React from 'react';
   import ChildComponent from './ChildComponent';
   
   function ParentComponent() {
   	const S1 = "Hello, world!";
    	const S2 = "have a good day!";
       return (
        <div>
            <ChildComponent message1={S1} message2={S2} />
        </div>
        );
        
   }
   
   export default ParentComponent;

2. 자식 컴포넌트에서 Props 사용하기

   • 자식 컴포넌트의 함수나 클래스 선언에서 'props' 매개 변수를 사용하여
     Props값을 받아온다.
   • Props값은 '{ }' 중괄호를 사용하여 JSX 내에서 사용할 수 있다.

   // ChildComponent.js
   import React from 'react';
   function ChildComponent(props) { // function ChildComponent(S1, S2) 도 사용 가능
   	return (
   		<div>
   			<p>{props.message1}</p>
            	<p>{props.message2}</p>
   		</div>
        );
   }
   export default ChildComponent;

위 예시의 'ParentComponent'에서
"Hello, world!"
"have a good day!" 라는 문자열을
각각 message1, message2라는 변수에 담아 ChildComponent에 Props로 전달한다.
ChildComponent에서는 {props.message1} , {props.message2} 를 사용하여 전달받은 값을 출력한다.

이런식으로 Props는 부모 컴포넌트에서 자식 컴포넌트로 일방적으로 전달되며,
자식 컴포넌트에서는 Props의 값을 읽기만 할 수 있다.
Props는 읽기 전용이므로 자식 컴포넌트에서 Props값을 변경하려면
부모 컴포넌트에서 Props를 업데이트 해야한다.

리액트를 처음 막 다루었을 때, 회사 내부에 리액트 개발자가 아무도 없어서
이처럼 컴포넌트 값을 다른 컴포넌트로 어떻게 옮기는지 거의 하루종일 찾은적이 있다.
context API에도 담아보고, SessionStroage, LocalStorage에도 담아보는 등등
다양한 삽질을 한 결과, 결국 props라는 개념을 가장 늦게 알게되어 사용하게 되었다.
역시 아는게 힘이다 !