Props의 이해

props의 사용 이유

부모와 자식 컴포넌트를 가지게 되는 경우 부모에서 선언된 state를 자식컴포넌트에서 사용하기위해 props로 전송하여 사용해야한다.
props의 선언은 아래와 같다.

function App() {
    return (
        <div className="App">
           <Modal title={값이요} user={사용자}>
        </div>
    );
}

여기서 props는 title, user가 된다.
즉, html의 속성값을 선언하는 형태로 props는 생성할 수 있다.

부모 컴포넌트의 state를 이용해서 자식컴포넌트에서 사용하고 싶은 경우 props를 이용한다.

function App (){
  let [title, setTitle] = useState(['남자 코드 추천','여자 코트 추천','맛집 추천']);
  return (
    <div>
      <Modal title={title}></Modal>
    </div>
  )
}

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

자식컴포넌트를 사용하는 곳에서 속성 추가

<Modal title={title}></Modal>

자식컴포넌트에서 props 파라미터 추가 후 props.형태로 사용

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

props는 state뿐만아니라 변수나 일반 텍스트, 함수까지 전송이 가능하다.

props는 함수의 파라미터 문법이랑 동일