[React] Props 사용하여 state 값 전달하기 (부모 컴포넌트 -> 자식 컴포넌트)

Props 사용하여 state 값 전달하기

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

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

 

위 코드에서 App() 컴포넌트에 있는 글제목 state를 Modal 컴포넌트로,

즉 부모 컴포넌트에서 자식 컴포넌트로 state를 props를 통해 전해주도록 하겠습니다.

---

부모 컴포넌트에서 자식 컴포넌트로 state 전달하는 방법

1. <자식컴포넌트 작명 = { state명 } />

function App() {
  return (
    <>
      <div className='App'>
        <Modal 글제목 = { 글제목 } />
      </div>
    </>
  );
}

 

2. 자식 컴포넌트에서 props 파라미터 입력 후 사용

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

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다. (파라미터명 : props)
• { 파라미터명.변수명 } 으로 작성하여 데이터를 작성합니다. { props.글제목[0] }

---

전체 코드

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

  return (
    <>
      <div className='App'>
        <Modal 글제목 = { 글제목 }/>
      </div>
    </>
  );
}

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