프롭스스스스

React에는 부모의 state를 전달해줄 수 있는 props문법이 있다.

한번 알아보자.

function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>{ 글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

해당 코드는 글제목이라는 변수가 define 되지 않았따는 에러를 볼 수 있따.
왜냐하면 글제목이라는 state 변수는 function App() 안에 있지 Modal안에 없으니깐 말이다.
js에선 다른 함수에 있는 변수를 마음대로 가져다 쓸 수 없다.

이를 위해 props라는 문법이 존재하는데
props는 부모에서 자식에게 state를 넘겨주는 것이다.
자식에서 부모, 자식에서 자식으로는 state를 넘겨줄 수 없고 오로지 부모에서 자식으로만 state를 넘겨주는 것이 가능하다

how?

1. 자식 컴포넌트에 가서 <자식컴포넌트 이름 ={state이름}/>
2. 자식컴포넌트를 만드는 function으로 가서 props라는 파라미터를 등로한 후, props.이름 사용

function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal 글제목={글제목}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

참고로 props 여러개의 프롭스를 전송해주는 것이 가능하다
그리고 state만 전송할 수 있는 것이 아니라, 일반 변수, 함수 전송도 가능하고, 일반 문자 전송도 가능하다.

만약 modal의 색깔을 변경하고 싶으면

function Modal(props){
  return (
    <div className="modal" style={{ background : 'skyblue' }}>
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

이렇게 작성해도 되겠지만,

function Modal(props){
  return (
    <div className="modal" style={{ background : props.color }}>
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

프롭스를 통해서도 가능하다고 보면된다.