next로 제작한 블로그프로젝트 리엑트 쿼리 적용시키기 part1 (스테픈 2km완료)
next.js에서 리엑트 쿼리를 도입해보기 위해
공식문서를 읽어보는 중입니다.
아마 리덕스처럼 wrapping을 해서 사용해야하는것 같은데요
자세한 사용법 및 개념을 파악하기 위해 공식문서를 먼저 읽어보고 있습니다.
v5버전으로 읽어보는중이네요
제가 만든 프로젝트에 도입하기 위해
일단 예제를 보며 따라해보고 있습니다.
일단 제 블로그의 구조는
이렇게 서버 컴포넌트에서 fetch로 데이터를 받아와서
클라이언트 컴포넌트에 props로 전달해주는 방식으로 동작하고 있는데요
이 부분을 수정해야겠습니다.
설명을 읽어보니 next.js에서 getStaticProps 를 사용해야하는군요
해당 기능으로 데이터를 사전에 fetch하고 props로 전달한뒤
해당 props를 받아서 전달할 클라이언트 컴포넌트를
HydrationBoundary state={dehydratedState} 이런식으로 감싸줘야하는군요
몇번 삽질끝에
코드를 이렇게 수정했는데요
제가 getStaticProps 를 처음 사용해보는데
getStaticProps는 정적 페이지를 빌드할 때 호출됩니다.
이를 통해 서버에서 데이터를 미리 가져와 빌드 시점에 정적 HTML 파일로 생성할 수 있고
이 함수는 Next.js의 데이터 페칭 메서드 중 하나로, 정적 사이트 생성(SSG)에 사용된다고 하네요
사실 getServerSideProps 이걸 사용하던 getStaticProps 이걸 사용하던 데이터 페칭만 사전에 하면
동작하는건 문제 없습니다..
일단 이렇게 코드를 추가해서
기존에 blog라는 서버사이드 컴포넌트에서 fetch를 해서 던저주던 부분을
리엑트 쿼리로 사전에 fetch하는거로 변경했습니다
아래 data props를 전달하는 부분을 삭제하고
데이터를 전달받는 페이지에서 나머지 작업을 하며 ㄴ되는데요
리엑트 쿼리에 data가 보통 fetch의 결과값으로 들어와서
구조 분해 할당으로 받아서 콘솔에 찍어보려고 했는데요
이미 data 변수명을 props로 전달중이라 아무 이름으로 일단 콘솔에 찍어봤습니다
일단 데이터가 잘 들어오네요
여기에서 서버 컴포넌트를 한단계 더 넘어가도 잘 동작하는지도 테스트 해봐야겠네요
일단 테스트를 해보는데
렌더링이 너무 많이되어 사이트가 터지네요
데이터가 잘 들어오는것 같긴 한데
렌더링때문이라 쓰여있어서
해당부분을 고민을 좀 해봐야겠네요
현재 useState르 사용해서 데이터를 받고있는데
여기에 데이터가 추가될때마다 렌더링이 발생해서 그런게 아닌가 싶은데요
이결 useRef로 변경하는 방향으로 생각하는게 맞는지 ..음
고민되네요
제가 생각하는 렌더링 부분을 수정했으나
같은 오류가 발생하는걸로 보아서
리엑트 쿼리의 문제인지 저도 해깔리네요;
useRef에 값을 넣어보고 처리되는지 봐야겠습니다.
보통 useRef는 렌더링이 안되는게 맞지만
리엑트 쿼리의 경우 데이터의 페칭이나 에러 등등의 쿼리가 변경되는경우 렌더링이 되는걸 활용해서
useState로 화면을 업데이트 하는걸 중단하고
리엑트 쿼리로 렌더링하는걸 담당하게 변경시키려고 합니다.
이렇게 하면 조금더 렌더링이 줄어들겠지요
몇번 고민해서
status값이 success로 변경되면 하도록 구성해봤으나
값이 안들어올수도 있다고 뜨는걸로보아
이게 아닌것 같고
이렇게 코드를 바꿔도 오류나네요
생각해보니
리엑트 쿼리의 v5버전에서는 옵션에서 사용하던 onSuccess 가 사라졌군요
대신
issuccess가 있네요
이걸 활용해서
useEffect로 렌더링 시키면 될것 같습니다.
일단 여기까지 생각해보고
내일 나머지 작업을 이어가야겠습니다.
스테픈 2km완료 
)