[React] - props

• 자식 컴포넌트가 부모 컴포넌트에 있는 state를 쓰고 싶을 땐, 그냥 갖다 쓸 수 ❌ (= 다른 함수에 있는 변수를 마음대로 갖다 쓸 수 없는 것처럼)
• 부모 컴포넌트의 state를 자식 컴포넌트로 전송하면 자식 컴포넌트는 props를 이용해 받아야 함

  • 자식 컴포넌트 : 다른 컴포넌트 안에 있는 컴포넌트

props로 부모 -> 자식으로 state 전송하는 법

• 부모 컴포넌트에서 <ChildComponentName 전송할때사용할이름 = {state이름} >
• 자식 컴포넌트를 생성하는 function의 파라미터로 props를 넣어준 뒤, 부모 컴포넌트의 state를 사용할 때 props.state이름 을 한다

❗️ props는 <Modal a={a} b={b}> 이렇게 10개, 100개, 1000개 무한히 전송 가능
❗️ state만 전송 가능한 건 아니고, 일반 변수, 함수, 문자 전송도 가능
<ChildComponentName 전송할때사용할이름 = {변수명}>
<ChildComponentName 전송할때사용할이름 = "문자">

• 자식 컴포넌트 -> 부모 컴포넌트로 전송 불가능
• 같은 위치의 옆 컴포넌트로도 전송 불가능

function Modal(props){
  return (
    <div className="modal" style={{ background : 'skyblue' }}>
      <h4>{ props.title[0] }</h4> // 부모 컴포넌트의 title이라는 state 가져옴
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

• props 문법은 파라미터 문법과 똑같음, 함수 하나로 다양한 기능을 사용하기 위해서 쓰는 파라미터 문법처럼 props를 통해서도 다양한 응용이 가능함

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

-> props.color 덕분에 모달창을 만들 때 매번 비슷한 컴포넌트를 또 만들 필요가 없어짐, <Modal color={'ColorName'} /> 으로 응용 가능! 원하는 색의 모달창을 쉽게 만들 수 있게 됨.