[React]Router Props

<프론트가 react인 프로젝트 유지보수 ing>

list 화면에서 <Link> 컴포넌트를 사용해 detail 화면으로 이동하는데 url에 파라미터를 추가하는 방식으로 진행했었음.

to={	//기존방식
    "/list/detail/" +
    list.id +
    "?page=" +	//파라미터들(검색 조건)
    currentPage +
    "&startDay=" +
    encodeURI(startDay) +	
    "&endDay=" +
    encodeURI(endDay)
}

 

BUT 시각적으로 파라미터를 주렁주렁 달고 있으니 복잡해보이고 URL도 길어지는 등 별로라고 생각됨.

갓글에 검색해 보니 Router Props란 좋은 기능이 있었음.

 

📢참조

https://velog.io/@sham/Router-Props-link%EB%A1%9C-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94-props

Router Props, link로 전달하는 props

브라우저와 리액트앱의 라우터를 연결하게 되면 라우터가 history api에 접근할 수 있게되며, route와 연결된 컴포넌트에 props로 match, location, history라는 객체를 전달한다고 함.

 

🔎 각 객체 설명

History
- 스택에 현재까지 이동한 url 경로들이 담겨있는 형태로 주소를 임의로 변경하거나 되돌아갈 수 있도록 해줌.

Location
- location 객체는 현재 페이지 정보를 가짐.

Match
- match 객체에는 URL이 매칭된 대한 정보가 담겨져있음.

다시 돌아와 Link to 에 파라미터를 붙이는 것이 아니라 객체 형태로 확장해서 코드를 변경해보았음.

to={{	//변경된 방식
    pathname:
        "/list/detail/" +
        list.id,
    state: {	//파라미터들
        page: currentPage,
        startDay:
            encodeURI(startDay),
        endDay: encodeURI(
            endDay
        ),
        selectFacilityId:
            selectFacility
    }
}}

 

detail 화면에서 props의 location을 찍음.

props.location 찍은 사진

넘어온 state 값으로 기호에 맞게 요리하시면 됨.

필자는 state 값으로 검색 조건을 컴포넌트끼리 주고 받았음. 끝.

 

한줄평 : 매번 느끼지만 아직까지도 모르는게 너무 많다는 점. 배울게 너~~~~무 많다는 점. 웹 개발자의 장점(?)인 듯😂