props

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

안에 글제목 state 가 필요한데

저번에 만든 내부에 글제목 state를 집어넣고 싶으면 어떻게하죠?

예를 들면 이렇게 하면 될듯요

function App (){
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
return (

<div>
  <Modal></Modal>
</div>

)
}

function Modal(){
return (

<div className="modal">
  <h4>{ 글제목[0] }</h4>
  <p>날짜</p>
  <p>상세내용</p>
</div>

)
}
▲ 하지만 제대로 실행되지 않습니다.

'글제목'이라는 변수가 define 되지 않았다고 에러가 뜹니다.

왜냐면 글제목이라는 state 변수는 function App()에 있지 function Modal()에 없으니까요.

자바스크립트에선 다른 함수에 있는 변수를 마음대로 가져다쓸 수 없습니다.

근데 컴포넌트 2개가 부모/자식 관계인 경우엔 가능합니다.

(다른 컴포넌트 안에 있는 컴포넌트를 자식컴포넌트라고 부릅니다)

부모 컴포넌트의 state를 자식 컴포넌트로 전송해줄 수 있습니다. 그럼 자식도 사용가능

전송시엔 props라는 문법을 사용합니다.

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

2개의 step을 따라주시면 됩니다.

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

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

하지만 이론만 설명하면 이해가 되지 않으니 예시를 보아야합니다.

글제목이라는 부모 컴포넌트의 state를 자식 컴포넌트 에 전송해봅시다.

function App (){
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
return (

<div>
  <Modal 글제목={글제목}></Modal>
</div>

)
}

function Modal(props){
return (

<div className="modal">
  <h4>{ props.글제목[0] }</h4>
  <p>날짜</p>
  <p>상세내용</p>
</div>

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

2. 자식컴포넌트 만드는 곳에 가서 props라는 파라미터 등록 후 props.작명 사용하면 됩니다.

props 전송문법은 중요하니 외워두도록 합시다.

(참고1) props는 <Modal 이런거={이런거} 저런거={저런거}> 이렇게 10개 100개 1000개 무한히 전송이 가능합니다.

(참고2) 꼭 state만 전송할 수 있는건 아닙니다.

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

<Modal 글제목="강남우동맛집"> 일반 문자전송은 중괄호 없이 이렇게 해도 됩니다.

▲ 자식 → 부모 패륜방향 전송은 불가능합니다.

▲ 옆집 컴포넌트로의 불륜전송도 불가능합니다.