[React] 부모의 state를 받는 자식 Component

목표

부모 컴포넌트가 자식 컴포넌트를 호출할 때,

자식 컴포넌트는 부모 컴포넌트에서 정의된 state 사용이 필요할 수 있다.

 

이 때 props 파라미터를 이용하여 부모 state를 가져와 보자.

 

부모->자식 state 전송

1. 자식 컴포넌트 호출 시, 호출 태그 내부에 전송할 state 작성

let [글제목,글제목변경] = useState(['나_Hi','다_안녕하세요','가_채로입니다']);

{
	modal==true?<Modal color={'skyblue'} 글제목={글제목}/>:null
}

위 코드는 부모 컴포넌트가 Modal이라는 컴포넌트를 호출하고 있는 것이다.

글제목이라는 state를 글제목이라는 이름으로 자식 컴포넌트에 전송하고 있다.

또한 color와 같이 state는 아니지만, 이와 같은 방식으로 자식 컴포넌트에 문자열이나

함수, 수등을 전송할 수도 있다.

let num=10;

function Hi(){
  return(
    <div>
      <h4>hi</h4>
    </div>
  )
}

<Modal myNum={num} 최애과일="수박" 하이함수={Hi}>

(컴포넌트 또는 함수의 이름은 반드시 대문자로 시작해야한다.)

 

※주의할점

자식 컴포넌트에서 state 상태 함수를 사용하기 위해서는 반드시 부모 컨테이너에서 state 상태 함수를 전송해줘야 한다.

 

2. 자식 컴포넌트에서 매개변수에 props 파라미터 등록 후 사용

function Modal(props){
  return (
    <div className="modal" style={{background:props.color}}>
      <h4>{props.글제목[0]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button>글수정</button>
    </div>
  )
}

매개변수 props를 통해 부모 컴포넌트가 전송한 state 및 문자열/수, 함수 등을 사용할 수 있다.

 

3. 결과 화면

제목 클릭 시, 부모에게 전송받은 제목과 색을 이용하여 모달이 출력되는 것을 확인할 수 있다.

 

주의점

부모가 자식 컴포넌트에게 state를 전송할 수는 있지만,자식 컴포넌트가 부모 또는 이웃 컴포넌트에게 state를 전송할 수는 없다.

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌