Props란 무엇인가?

자식이 부모의 state를 가져다쓰고 싶을 때 사용한다.

function Modal(){
	return(
      <div className='modal'>
        <h4>{ 글제목[0]} </h4>
      </div>
    )
}

라는 Modal이라는 컴포넌트를 생성했다고 치자.
그 뒤 App.js에서 Modal이라는 컴포넌트를 바로 사용하고 싶을 때

function App (){
  let [글제목, 글제목변경] = 
      useState(['남자코트 추천', '강남 우동맛집', '리액트독학']);
  return (
    <div>
      <Modal></Modal>
    </div>
  )
}

이렇게 쓰면 Modal에 state를 집어 넣을 수 있다.

.
.
.
사실은 저렇게 그냥 넣으면 오류가 생긴다.
이유가 뭘까? 자바스크립트안에선 다른 함수에 있는 변수를 마음대로 가져다 쓸 수가 없기 때문이다.

그럼 어떻게 해야할까?
바로 props로 부모로부터 자식에게 state를 전송해주어야 한다.

Props 전송하는 법

사용법은 간단하다.

1. 자식 컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름}/>
2. 자식 컴포넌트 만드는 function으로 가서 props라는 파라미터
   등록 후 props.작명 사용

function App (){
  let [글제목, 글제목변경] = 
      useState(['남자코트 추천', '강남 우동맛집', '리액트독학']);
  return (
    <div>
      <Modal>글제목={글제목}</Modal>
    </div>
  )
}


function Modal(props){
	return(
      <div className='modal'>
        <h4>{ props.글제목[0]} </h4>
      </div>
    )
}

이런식으로 해줘야 props사용이 안정적으로 된다.

여러 컴포넌트에 스타일 각각 주는 법

function Modal(props){
	return(
      <div className='modal' style={{background: 'skyblue'}}>
        <h4>{ props.글제목[0]} </h4>
      </div>
    )
}

에서

<div className='modal' style={{background: props.color}}>

로 주면 끝이다.
그 뒤 비슷한 컴포넌트를 만들 때마다

<Modal color={'skyblue'}/>
<Modal color={'orange'}/>

라고 해준다면 배경화면이 각각 다른 컴포넌트들이 생성이 된다.