[React] 리액트 props 사용법

🔥 컴포넌트에 대해 기초적인 지식이 없다면 해당 포스팅을 참고하자. 🔥

Why to use ‘props’

컴포넌트는 결국 함수로서 컴포넌트 바디 scope 를 벗어나는 변수나 state 를 사용하지 못한다.

부모 컴포넌트에서 정의한 state 를 자식 컴포넌트에서 사용하기 위해서는 props 문법을 이용해야 한다.

What is ‘props’

부모 컴포넌트에서 자식 컴포넌트로 전달하는 변수 혹은 인자를 props 라고 한다.

How to use ‘props’

부모 컴포넌트에서 자식 컴포넌트를 사용할 때 html(jsx) 태그 안에 전달하고 싶은 변수를 입력한다.

형식은 다음과 같다. <태그 임의의props명={전달할 변수명}> , 예를 들면 <div name={name}> 등과 같이 말이다.

이 때, 자식 컴포넌트로서 사용되는 함수를 정의할 때 props 파라미터를 argument 로서 입력해야한다.

예제 코드는 다음과 같다.

function App() {
  let [title, setTitle] = useState(['나이키', '아디다스', '퓨마']);
  return
  (
    <Modal title={title}></Modal> // <Modal 임의의props명={전달할 변수명}>
  )  
}

function Modal(props) {
  return (
    <div>
      <h2> 제목 { props.title[1] } </h2>
    </div>
  )
}

Ex. 글 제목을 누르면 모달창이 뜨게 해보자

특정 글 제목을 누르면 그 글에 해당하는 상세 내용이 뜨는 모달창을 만들어 보자.

결과 화면은 다음과 같다.

코드는 다음과 같다. .map() 함수에 익숙하지 않은 사람들은 다음 을 참고하자.

import React, {useState} from 'react'
import './App.css'

function App() {
  let [title, setTitle] = useState(['나이키', '아디다스', '퓨마']);
  let [date, setDate] = useState(['2월 2일', '3월 5일', '4월 6일'])
  let [modalNum, setModalNum] = useState();
  let [modal, setModal] = useState(false)
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 BLOG</div>
      </div>
      { title.map((e, i) => {
        return (
          <div className="list">
            <h3 onClick={() => {
              setModalNum(i);
              modal === false ? setModal(true) : setModal(true);
            }}>
              {' '}{ e }{' '}
            </h3>
            <p>{ date[i] }</p>
            <hr />
          </div>
        );  
      })}
      {
        modal === true 
        ? <Modal title={title} date={date} modalNum={modalNum}></Modal> 
        : null
      }
    </div>
  )
}

function Modal(props) {
  return (
    <div className="modal">
      <h2>{props.title[props.modalNum]}</h2>
      <p>{props.date[props.modalNum]}</p>
    </div>
  )
}

export default App

❗ 기억해야 할 것은 몇 번째 제목을 눌렀는지에 관한 상태 정보를 state 를 이용해서 저장한다는 점이다 ❗