[React] props 부모에서 자식으로 state 전송하는 방법

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

 

근데 컴포넌트 2개가 부모/자식 관계인 경우에는 가능.

(다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라고 함.)

 

부모 컴포넌트의 state를 자식 컴포넌트로 전송해줄 수 있기 때문에 자식도 state 사용가능.

전송시에는 props라는 문법을 사용.

 

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

2 step

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

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

function App (){
  let [title, setTitle] = useState(["오늘의 일기", "브랜드 추천", "맛집 추천"]);
  return (
    <div>
      <Modal title={title}></Modal> // 작명은 관습적으로 state이름과 동일한 이름으로 함.
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.title[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

참고) props는 <Modal 이런거={이런거} 저런거={저런거} > 등등 여러개를 전송 가능(state 이외에도 일반 변수, 함수 일반 문자 전송도 가능, 일반 문자전송은 중괄호 없이 "문자" 이런식으로만 담아도 됨.).

 

자식 -> 부모 방향으로의 전송은 불가능함.

옆 컴포넌트로의 전송도 불가능함.

 

---

출처: 코딩애플

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!