[React_study] 자식이 부모의 state 가져다쓰고 싶을 때는 props

* props를 이용하여서 부모 -> 자식으로 state전송하는 방법

1. 자식 component사용하는 곳에 가서 <자식컴포넌트 작명={state이름}/>
2. 자식 component 만드는 function으로 가서 props라는 파라미터를 등록후 props.작명 및 사용
3. 보통은 props의 명과 state의 명을 동일하게 해준다.

아래의 예시를 통해 확인

 

title이라는 부모 컴포넌트의 state를 자식 컴포넌트 <Modal>에 전송해봅시다.

function App (){
  const [title, setTitle] = useState('Hello world');
  return (
    <div>
      <Modal title={title}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.title }</h4>
      <p>date</p>
      <p>content</p>
    </div>
  )
}

• props는 10개, 100개, 100개 무한히 전송 가능하다.
• 꼭 state만 전송할 수 있는건 아니다.
  • 일반 변수, 함수도 전송이 가능하다.
  • 일반 문자 전송은 중괄호 없이 해도된다. ex) <Modal title="hello world">

---

• 부모 컴포넌트의 state를 자식 컴포넌트로 전송해줄 수 있습니다. 그럼 자식도 사용가능
• 전송시엔 props라는 문법을 사용합니다. 

• 자식 → 부모 전송은 불가능

• 옆 컴포넌트로의 전송도 불가능

---

* props는 함수 파라미터 문법이랑 똑같다.

- 아래의 방법처럼 응용이 가능하다.

function Modal(props){
  return (
    <div className="modal" style={{ background : props.color }}>
      <h4>{ props.title }</h4>
      <p>Date</p>
      <p>Content</p>
    </div>
  )
}

• props.color이라는 파라미터를 이용해서 비슷한 컴포넌트를 쉽게 만들 수 있다.
• <Modal color={'skyblue'} /> 
• <Modal color={'orange'} />