• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

안녕하세요.

21.01.05 12:07 작성 조회수 190

0

안녕하세요!

수업을 다듣고 응용하고 싶어서 노드버드를 토대로 개인작업을 해보고 있습니다.

/admin  -> /post/[id].js

이런 식으로 이동해서 해당 포스트를 수정할 수 있게 하려고 합니다.

/admin  -> /post/[id].js (A포스트) -> /admin -> /post/[id].js (B포스트) 

/admin을 중심으로 개별 포스트를 수정하러 진입할때,

각각의 포스트의 정보가 입력된 채로 페이지가 나오게 싶었습니다. (가장 큰 목적..)

그래서 [id].js 파일에 getServerSideProps를 적용했는데요. 

리덕스 인스펙터로 보면, '__NEXT_REDUX_WRAPPER_HYDRATE__' 단계에서

해당 페이지의 값을 가져오긴 하는데. 화면에 렌더링은 되지가 않습니다...;

이때 렌더링되지 않고, 다시 어드민으로 갔다가 다른 포스트 수정페이지로 들어가면, 이제서야 해당정보가 렌더링되어 있습니다.

(상황) A포스트를 갔다가, 어드민에 갔다가 다시 B포스트를 가면 A포스트의 정보가 남아있습니다.

<Link href='/post/1'><a>수정</a></Link> 형태로 수정버튼을 만들었습니다.

어드민에서 각 포스트에 들어갈때, 해당 포스트의 정보가 입력된 채로 받고 싶어서

getServerSideProps를 사용한 것인데. 어드민 환경에서는 잘못된 접근인걸까요..?

다른 페이지에서 진입시에는 '__NEXT_REDUX_WRAPPER_HYDRATE__' 상태가 무의미해지는 것일까요..?

꼭 직접 해당 페이지로 접근하는 경우에만 유의미할까요..? 


답변 10

·

답변을 작성해보세요.

1

HYDRATE를 안 쓰는 게 더 나을 것 같습니다. reducer에서 hydrate 관련 액션을 제거하시고요.

store를 만들 때 이렇게 서버에서 나오는 데이터를 바로 꽂는 것이 더 안정적일 것 같네요.

function getServerState() {
  return JSON.parse(document.getElementById('__NEXT_DATA__').textContent).props.pageProps.initialState;
}
const store = configureStore({
  reducer,
  middleware: [firstMiddleware, ...getDefaultMiddleware()],
  preloadedState: typeof window !== undefined ? getServerState() : undefined
});

0

이 강좌는 리덕스 강좌 리뉴얼하기 한참 전 강좌입니다.

0

자유인님의 프로필

자유인

2021.01.05

리덕스 업데이트 강의에서 saga 따로 안쓰고도 구현 가능한 요령 말씀해주셨는데, saga를 따로 쓰신 이유가 궁금합니다.

0

jsfever님의 프로필

jsfever

질문자

2021.01.05

헉.. useForm에 defaultValue에 안넣고 화면 상에다가 그리니 값이 제대로 나오네요. 따로 업데이트 해주어야겠네요. 정말 감사합니다! 그러면 페이지로 직접 들어가는 경우에는 값이 다 채워져서 렌더링이 되었는데. 이 이유는 페이지로 직접 들어가는 경우(새로고침 또는 URL치고 진입)에는 잠시라도 값이 비는 상황이 없어서 그런 것인가요?

0

이거 useForm에 defaultValue가 처음에 빈값으로 들어가서 그 다음에 hydrate가 되더라도 업데이트 안 되는거 아닌가요? useForm의 데이터를 따로 업데이크해주셔야할것같은데요.

0

jsfever님의 프로필

jsfever

질문자

2021.01.05

네. 리덕스툴킷과 사가를 같이 썼습니다. 알려주신 데이터를 바로 꽂는 방법으로 해봤는데. 같은 상황이네요; 

0

자유인님의 프로필

자유인

2021.01.05

한번 적용해 봤는데 리덕스 코드 내에서 window를 먼저 호출해서 그런가 undefined라고 되어있네요

0

자유인님의 프로필

자유인

2021.01.05

저도 비슷한 에러인데요, 혹시 코드 사가랑 툴킷 다 쓰신건가요?

0

jsfever님의 프로필

jsfever

질문자

2021.01.05

  말씀해주신대로 콘솔을 찍어 보았습니다.
 -----HYDRATE----- 이후에 값이 쭉 들어오는데, 화면상에는 값이 노출이 안됩니당...ㅠㅠ 
  리덕스툴킷을 이용해서 작업했습니다. 혹시 리덕스 설정시에 문제가 있는 것일까요..?;;

0

리덕스 구조가 꼬였을 수도 있습니다.

const state = useSelector(state => state)

console.log(state)

를 컴포넌트에 추가한 뒤 콘솔에 데이터 들어있는지 확인해보세요.