리액트 - props

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

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

위의 코드를 실행하면 '글제목'이라는 변수에 undefined 에러가 나온다.
왜냐면 글제목이라는 state 변수는 App에서 정의했는데 Modal에서 사용하려고 했기 때문이다.


이처럼 자바스크립트에선 다른 지역에 있는 변수를 마음대로 사용할 수 없지만 props문법을 사용하면 가능하다.

위의 사진처럼 두 컴포넌트가 부모/자식 관계에 있는 경우 부모 컴포넌트의 state를 props를 이용해 자식 컴포넌트로 전송해줄 수 있고, 전송하면 자식도 사용이 가능하다. (반대로는 불가능)

props 사용 방법

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

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

1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 변수명 = {state이름}/>
2. 자식컴포넌트 만드는 곳에 가서 props라는 파라미터 등록 후 props.변수 사용

props는 state나 변수, 함수를 한번에 여러개 전송 가능하다.