props란? 왜 쓰는가

js 파일안에 function App안에 작업을 해서 html을 만든다. ( JSX )

우리는 예시로 Modal이라는 컴포넌트를 만들어서 App안에 넣을수 있다.

예시 Modal 컴포넌트

그런데 우리는 컴포넌트를 만들때 하나의 내용만을 위해서 만들지 않는다. (하나만 할거면 하드코딩하지?)
보통 컴포넌트는 3가지 상황에서 많이 사용된다.
1. 반복적인 html을 축약하고 싶을때
2.페이지를 전환할때 큰 페이지를 컴포넌트로 사용하면 유용
3.자주 변경되는것들을 컴포넌트화 하면 편함

그래서 App function에서 만든 State를 Modal function에 사용한다면 좋겠지만 바로 사용할수 없다.

왜냐하면 당연하게도 Function App에서 만든 변수나 State는 바깥에서 사용할 수 없기 때문이다.

Props 등장

여기서 props가 필요하게 된다. react에서는 App을 부모 컴포넌트 다른 컴포넌트를 자식 컴포넌트 라고 한다.

이런 방식으로 props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보낼수 있다.

그래서 만약 State의 이름이 title 이라면 App Function에는 title = { title } 

Modal Function에는 파라미터를 넣어주고 {props.title}이라고 적어주면 됩니다. 파라미터는 보통 props라고 작성한다.

유의점  : props전송은 부모 -> 자식만 가능. 자식 -> 부모는 불가능합니다.
그리고 만약 Modal이 두개 존재 하다고해서 Modal 끼리 전송은 불가하다.