React 9. props : 자식이 부모의 state를 가져다쓰고 싶을 땐 말하고 쓰셔야합니다

App이라는 컴포넌트 안에 이라는 컴포넌트를 넣었을때
부모자식관계 라고 함
App은 부모, Modal은 자식컴포넌트
자식컴포넌트가 부모컴포넌트 안에 있던 state를 갖다 쓰고 싶을 때
props라는 문법으로 state를 전송한 뒤에 { props.state이름 }이렇게 사용해야함

전송해주는 문법이 바로 props입니다. (컴포넌트간의 자료 전달법입니다)

props 사용법

2개의 step을 따라주시면 됩니다. props 많이 쓰니 꼭 암기
1. <자식컴포넌트 전송할이름={state명}> 이렇게 사용해주신 후
2. 자식컴포넌트 선언하는 function 안에 파라미터를 하나 만들면 됩니다.

Example

function App (){
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
return (
  <div>
    ...
    <Modal 글제목={글제목}></Modal>
  </div>
)
}
function Modal(props){
return (
  <div className="modal">
    <h2>제목 { props.글제목[0] }</h2>
    <p>날짜</p>
    <p>상세내용</p>
  </div>
)
}

두가지 스텝을 밟아주시면 props로 원하는 state를 전송가능합니다.

1. <Modal 전송할이름={state명}> 이렇게 원하는 state를 적어주시면 전송됩니다.
2. 그리고 function Modal(props){} 이렇게 Modal 함수 소괄호 내에 파라미터를 하나 추가해줍니다.
3. 그럼 이제 props.전송할이름 이렇게 쓰시면 전송된 props를 사용가능합니다.

참고1) props는 <Modal 이런거={이런거} 저런거={저런거}> 이렇게 10개 100개 1000개 무한히 전송이 가능합니다.

참고2) props라는 파라미터엔 전송한 모든 props 데이터가 들어가있습니다. props.글제목 이런 식으로 원하는 것만 꺼내쓰시면 됩니다.

참고3) props 전송할 땐 꼭 {} 중괄호로 전송해야하는건 아닙니다.
<Modal 글제목={변수명}> 이렇게 변수명을 넣고싶으면 중괄호를 쓰고
<Modal 글제목=”강남우동맛집”> 이렇게 일반 텍스트를 전송하고 싶으면 따옴표 써도 됩니다.