velopert / learning-react

[길벗] 리액트를 다루는 기술 서적에서 사용되는 코드
568 stars 406 forks source link

Chapter20 - ServerSideRendering with redux-saga #384

Open jakebox1966 opened 1 year ago

jakebox1966 commented 1 year ago

안녕하세요. 현재 개념 다시 짚을 겸해서 '리액트를 다루는 기술' 을 보며 예제 진행해보고 있습니다. react-router v6으로 올라오면서 공식문서나 레퍼런스 자료들 찾아보며 수정해보고 있는데요. redux-saga 관련되어 있는 UsersPage 컴포넌트 작업 도중 이슈가 생겼습니다.

const UsersPage = () => {
    let { id } = useParams()
    console.log(id)
    return (
        <>
            <UsersContainer />
            <Routes>
                <Route
                    path=':id'
                    element={<UserContainer id={id} />}
                />
            </Routes>
        </>
    )
}

위와 같은 형태로 이것 저것 수정해 보고있는데, 현재 react-router v6에서는 더 이상 match 객체를 사용하지 않고 useParams Hook 사용을 명시 하고 있습니다. 여기서 드는 의문이 서버사이드렌더링에서는 Hook이나 라이프사이클 API에 접근할 수 없다고 알고 있습니다. 아니나 다를까 API 호출하는 과정에서 'id' 파라미터가 계속 undefined로 404오류가 나고 있구요. 뭔가 다른 해결 방법이 있을까요?

remix 사용을 말씀하셨지만 일단 차근차근 정리해나가려보려는 욕심에 이렇게 글 남겨봅니다.