자식이 부모의 state 가져다 쓰고 싶을 때는 props를 사용하면 됨.
함수 안에서 만든 모든 변수는 함수 탈출 불가임..
그래서 아래 a라는 변수도 다른 함수에서 가져다 쓸 수 없음
이 때 props 문법 쓰면 가능
function 함수() {
let a = 10;
}
App 컴포넌트 안에 Modal 컴포넌트가 있는 상황.
자식은 props를 통해 부모 state를 사용할 수 있게 됨
function App ( ) {
const [글제목, set글제목] = useState("");
return (
<div>
//얘는 props 아니고 컴포넌트임 ㅋㅋ
<modal 글제목props임={글제목}/>
</div>
)
}
//props 추가
function Modal (props) {
return(
<div>
<h4>{props.글제목}</h4>
<p>날짜</p>
<p>상세내용<p>
</div>
)
}
//state가 배열인 경우 이렇게 꺼내 쓸 수도 있음
<h4>{props.글제목[0]}</h4>
컴포넌트 많아지면 props 쓰는게 귀찮아짐
Q. 다양한 색의 모달창이 필요할 경우 어떡함? Modal 복붙,,? 은 아니고..
Modal에서 prop.color 로 구멍 뚫어놓음
그리고 Modal 컴포넌트 쓰는 곳에 가서 style 추가 해주면 각각에 맞게 색이 바뀜.
function App ( ) {
return (
<div>
<modal color=('blue') 글제목={글제목}/>
<modal color=('yellow') 글제목={글제목}/>
</div>
)
}
function Modal (props) {
return(
<div className="modal" style = {{
background : props.color
}}>
<h4>{props.글제목[0]}</h4>
<p>날짜</p>
<p>상세내용<p>
</div>
)
}