props

자바스크립트에서는 다른 함수에 있는 변수를 마음대로 사용할 수 없다. 

 

컴포넌트 2개가 부모 / 자식 관계인 경우는 사용 가능 

부모 컴포넌트의 state 를 자식 컴포넌트로 전송해줄 수 있다. 전송 시, props 라는 문법을 사용한다. 

 

 

 

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

---

1. 자식 컴포넌트 사용하는 곳에서 <자식컴포넌트 이름={state이름} />

2. 자식컴포넌트 만드는 function 으로 가서 props 라는 파라미터 등록 후 props.이름 사용한다. 

 

title 이라는 부모 컴포넌트의 state 를 자식 컴포넌트 <Modal />에 전송하기

 

function App() {
  let [title, setTitle] = useState([
    "title1",
    "title2",
    "title3",
  ]);
return (
	<div>
		<Modal title={title} />
	<div>
)
}

function Modal(props){
	return(
        <div className="modal">
          <h4>{ prop.title[0] }</h4>
        </div>
	)
}

props 는 <Modal title1={title1} title2={title2} title3={title3} ...  /> 이런식으로 무한히 전송 가능하다. 

 

state 만 전송할 수 있는 것이 아니라

<Modal title={변수명}/> 일반 변수, 함수 전송도 가능하고,

<Modal title="Hi" /> 일반 문자열 전송은 중괄호 없이 가능하다. 

 

자식 -> 부모 방향으로는 props 전송이 불가능하고, silbling 관계에서도 전송 불가능하다. 

 

 

 

 

props 는 함수의 파라미터와 같다. 

---

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

모달창의 배경색을 바꿔주고 싶을 땐 위와같이 background 속성을 바꿔주면 된다. 

 

그런데 노란색 모달창, 빨간색 모달창이 필요할 경우, 그때마다 Modal1, Modal2 이렇게 하드코딩하면 귀찮다. 

 

 

function Modal(props){
  return (
    <div className="modal" style={{ background : props.color }}>
      <h4>{ props.title[0] }</h4>
    </div>
  )
}

위와같이 props 이용하여 Modal 창 불러올 때마다 color props 를 다르게 불러와주면 됨