props

컴포넌트에 있는 어떤 값을 다른 컴포넌트에 전달 하기위해서
props를 사용 한다.

• 상위(부모) App컴포넌트에서 하위(자식) 컴포넌트에만 전달 가능하다.
  (App컴포넌트 제외 하위 컴포넌트 끼리 또한 불가능)
• state뿐만이 아니라 일반 문자열도 전달이 가능하다.
• 자식 컴포넌트 함수 파라미터에 props를 추가
  (작명은 자유이지만 통상 props로 많이 사용한다.)

ex)

function App() {
    let [title,setTitle] = useState('hi');
    return (
        <div className="App">
            <h1>{title}</h1>   // <h1>hi</h1>
            <Child title={title}/>	<h1>hi</h1>
        </div>
    );
}
function Child(props) {
    return(
        <h1>{props.title}</h1>
    )
}

props를 통해 App컴포넌트 안에서 만든 state를 Child컴포넌트에 전달 하였다.

1.

우선 전달 받을 자식 컴포넌트가 사용되는 태그 안에서
작명 = {가져올 부모컴포넌트의 state 등..} 으로 값을 넣어준다.

<Child 작명={title}/>

대부분 작명은 가져올 부모 state명과 동일하게 하는게 대부분이다.

<Child title={title}/>

2.

자식컴포넌트함수 파라미터자리에 props를 받아온다.
전달 받을 state를 사용할때는 {작명.state}

<h1>{props.title}</h1>

상위컴포넌트에 있는 title이라는 state를 전달받았고
이 컴포넌트를 상위컴포넌트에서 사용한 예제이다.

부모컴포넌트에서 자식컴포넌트에 props를 전달하면,
자식컴포넌트에서 props를 사용할 수는 있지만 변경할 수 없다.
부모컴포넌트에서만 변경이 가능하다.