props 자식이 부모의 state 사용할 때

function App () {}에 속해있는 state를 component문법을 이용해 만든 function Modal() {}에서 사용하고 싶을 때가 있다.

App은 부모 컴포넌트 Modal은 자식 컴포넌트라고 한다. 

 

사용방법은

<Modal 작명={ state명 }></Modal>

이렇게 자식 컴포넌트에 작명={state명}을 써준 후, 자식 컴포넌트에서 function에 props 파라미터를 입력하고,  사용할 때 {props.state명}으로 사용한다. 예를 들면,

function App() {

  let [글제목,글제목변경] = useState(['남자 코트 추천', '코딩 인강 추천', '데이트 맛집 추천']);
  let [모달, 모달변경] = useState(false);

  return (
      {
        모달 === true
        ? <Modal 글제목={글제목}></Modal>
        : null
      }
  ); 
}

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

이런 식으로, 부모컴포넌트 function App에서 state를 만들고 새로운 자식컴포넌트 function Modal을 만들어 자식에서 부모의 글제목 state를 쓰려면 부모에서 해당 태그에 작명={state명} 을 써주고 자식컴포넌트에서 파라미터 자리에 props(관습적으로 props라고 쓰는 것임) 이라 쓰고, state를 쓸 자리에 props.state이름을 사용하면 된다.

 

다른 파일로 컴포넌트를 빼서 만들었을 때 app.js에서의 state를 쓰려면 위와 같은 방식으로 사용하면 된다. 만약, 폴더에 useState를 선언하면 되지 않을까라는 생각이 들면 그래도 가능하지만, 중요한 데이터는 App컴포넌트에 보관하며, 상위에서 하위로 전송은 쉽지만 하위에서 상위로 전송이 어렵기에 app에 선언하고 props를 이용해서 자식에 전송하는 개념을 사용한다. 혹은 나중에 redux를 배우면 redux에 파일을 보관해도 가능하다.