[React] props : 자식이 부모의 state를 가져다쓰고 싶을 땐 말하고 쓰셔야합니다

Lee Tae-Sung·2021년 10월 26일
0

React.js

목록 보기
9/26

모달 안에 상세 내용을 넣어주고 싶다

앱을 부모 컴포넌트

모달이 자식 컴포넌트

props로 자식에게 state 전해주는 법
1. <자식컴포넌트 작명={state명} />
2.자식 컴포넌트에서 props 파라미터 입력 후 사용

      {
        modal === true
        ? <Modal 작명={전송할state}/>
        : null
      }
function Modal(props){
  return (
    <div className="modal">
      <h2>제목 { props.글제목[1] } </h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

props로 다같이 전송해야함.

=> 기본 props 원리는 Vue.js랑 동일하고
=> 대신 사실 부모 자식의 컴포넌트를 분명하게 구분하는 Vue.js가 개인적으로 props 다루는데 더 암기가 안됐다.

=> 그런데 차라리 바닐라 js 함수처럼 한 페이지에서 받아서 만드니 직관적으로 이해가 잘 된다.

=> 점차, js 프레임워크를 사용하는 이유와 Vue를 알고 있고 React를 익히고 있는 만큼 둘의 장단점을 점차 몸으로 느껴가고 있다.

=> 확실히 빠르게 사이트를 만들려면 Vue.js로 만드는게 좋지만 만약 바닐라js의 이해가 있는 사람이라면 오히려 React.js의 방식이 더 편할거라고 생각된다.

profile
긍정적인 에너지를 가진 개발자, 이태성입니다.

0개의 댓글