[React] props 문법 설명과 예제

 

React에서는 컴포넌트에서 컴포넌트로 데이터를 보낼 때 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>
  )
}

1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={보낼 데이터} /> 
2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 작성 후 사용 시 props.작명 사용하면 된다.
3. state뿐 아니라 변수, 함수 다 전송 가능하다.

---

-> 자식 컴포넌트에서 부모 컴포넌트로는 불가능하다.

 

-> 같은 곳에 존재하는 컴포넌트에게도 불가능하다.