[React] Props

props는 부모 컴포넌트로 부터 전달받은 데이터를 지니고 있는 객체이다.

props는 부모 컴포넌트의 변수, 함수, state등등을 전달할때 사용한다.

props를 사용한 데이터 전달은 오직 부모 컴포넌트에서 자식 컴포넌트로만 가능하며, 형제에서 형제로, 자식에서 부모로 전달은 불가능하다.

//부모 컴포넌트에서 보낼 때
<Comments commentList={commentList} removeComment={removeComment} />

부모컴포넌트에서 자식컴포넌트로 props를 사용해 데이터를 전달할 때에는 컴포넌트에 속성값으로 전달할 데이터를 넣어준다.

//자식 컴포넌트에서 받을 때
function Comments(props) {
  return (
    .
    .
    .
    )
}

위 방법으로 데이터를 전달받았을 경우 전달받은 데이터를 사용할 때에는 props.commentList, props.removeComment등의 형식으로 작성해야한다.
props는 구조분해할당도 가능하다

function Comments({ commentList, removeComment }) {
  return (
    .
    .
    .
    )
}

위의 경우 전달받은 데이터를 사용할 때 props.없이 commentList,removeComment로 직접 사용할 수 있다.

---

자식 컴포넌트에서 부모 컴포넌트의 state를 업데이트 해야하는 상황에는 state를 업데이트하는 함수를 부모 컴포넌트의 작성한 후 props로 자식 컴포넌트로 전달해 필요한 상황에 실행시키면 된다.