• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 React 게시판 Route 안의 컴포넌트에 props 보내는 법

Route 안의 컴포넌트에 props 보내는 법

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 글쓴이
  • #22578

    김범우
    참가자

     

    route 에 자식으로 component={} 와 render ={} 를 공부하고있습니다. 그러다가

    Match.params 는 또 어떤차이인지 . .궁금합니다

    현재 궁금한점은  페이지로 이동시킬대 data를 함께전송하는것인데, 

    Match.params 로 데이터를 주고 받을때 어떻게사용하는지 궁금합니다.

    match.params 는 react-router-dom 모듈설치 없이 react 내장 함수같은건지, 따로 설치를 해야 사용이가능

    한지도 궁금합니다 . 코드가 궁금한것이 2가지가있는데,

    질문 1 )

    현재 app.js 부모 컴포넌트에서 state를 관리하고있는데 부모컴포넌트에서 let name ='kim' 이라는 변수에값을 넣고서 자식 컴포넌트 (Test)에서 받으려할때입니다 (export/import 다한후)

    부모컴포넌트에서 라우트를사용하여

    <Route path='/test/:name' component={Test} /> 

    보내고

    test 자식 컴포넌트 에서는

    function Test(match){

    <h3> match.params.name</h3>  

    }

    하면 받아지는건가요? 

    질문2)

    <Route path=' / ' render={  (props) => <Home name={name} {...props} /> } />

    이코드에서 name 은 props 사용법으로 파라미터로 받아서 props.name 하면 되는건 알겠는데,

    render 사용할때 (props) 와 스프레드 ...props  는 무엇을 뜻하는건가요 복사카피하는건알겠는데,

    왜 저자리에 무엇을위해 있는건지 . .

    저 props 를 자식컴포넌트에서 받을때는 어떻게 받아쓰는건가요 . . ㅠㅠ

    #22595

    codingapple
    키 마스터

    url 파라미터로 보내도 되고 props로 보내도 됩니다

    보낼 데이터가 길고 많으면 url이 복잡해질듯요 

     

    <컴포넌트 firstname="john" age="30" />

    이것은

    const props = {firstname: 'john', age: '30'}
    <컴포넌트 {...props} />

    이거랑 같은 의미입니다 일종의 축약문법입니다

    #22609

    김범우
    참가자

    아 ! 감사합니다!!!!

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠