next로 제작한 블로그프로젝트 리엑트 쿼리 적용시키기 part2 (스테픈 2km완료)
next에 적용하는중입니다
문제를 겪고있는데요
타입스크립트에서 발생한 문제입니다만..
컴파일단계에서 오류이니 어떻게 해결하는게 좋을지 고민이네요
일단 오류에 대한 부분은
다른 클라이언트 컴포넌트에서
리엑트 쿼리의 값을 사용하려고 하는데 select로 원하는 값만 받으려고 합니다만..
고민해봤는데 가져와야하는 값이 상당히 많네요
2중 반복문을 돌려야 겨우 원하는 값을 가져올것 같은데..
fetch데이터의 처음 부분에서 값을 하나씩 순회시키는 부분에서부터 막히네요
순회한뒤 내부에 존재하는 comment로 접근해야하는데
여기에 언디파인이 들어올 수 있다며 오류가 났습니다
조건문으로 언디파인이 아닐때만 작동하게 넣어도 오류가 나는 상황이네요
저기에서 x는 위에 스팀잇 데이터 형식으로 데이터가 들어올텐데요
그럼 comment가 없을 수 없는데
계속 오류가 나네요
그래서 직접 타입지정을 다 해줘봤더니 오류가 안뜨네요
코드도 조금더 변경했습니다
이제 잘 동작하는지 확인해봐야겠네요
잘 들어옵니다
select에서 처리하는 로직으로 변경했더니
렌더링 이슈는 안뜨네요
방향을 잘 잡은것 같습니다
이제 나머지 로직도 변경해야겠습니다.
지금 로직대로면
블로그를 전부 동일한 화면만 보여주게 되네요
select를 props로 받아서 하도록 변경해야겠습니다.
몇가지 고민이 되는데요
select에 조건을 하나 더 추가해서
특정 조언에만 분류하는 방식으로 처리하는게 현재 로직에서는 더 간단할것 같네요
if문을 조금더 사용해서 처리해봐야겠습니다.
현재 화면에서 보면
title로 props를 넘기고 있는데
타이틀을 사용하는 화면이 없긴 하네요
이부분을 수정해야겠습니다.
원래 상위 컴포넌트에서 분리해서 useState에 저장하던 로직을 통으로 리엑트 쿼리쪽으로 옮겼습니다.
뭔가 코드가 지저분해 진듯 한데..
실제 상태관리로 치면 이게 맞는 상황이긴 하네요
서버 상태이니 리엑트 쿼리에서 처리를 해야하는거죠
기존의 제 코드는 서버의 상태를 클라이언트에 저장해서 저장한 코드로 분류하고 사용하는 방식이라
이렇게 변경했더니 이 좌우 화살표가 맛탱이가 가버렸네요
서버의 값을 클라이언트에 저장해서 저장된 길이를 비교해서 이동하는 방식이었는데
리엑트 쿼리로 로직을 변경하니
해당 컴포넌트가 길이를 인식을 못하는것 같군요
아.. 재시작 해보니 문제없이 동작하네요
이렇게 3 컴포넌트는 잘 동작하는데
문제느 디테일 페이지입니다
서버 컴포넌트인 page가 따로 존재하기 때문인데요
파일 열어보니
별다른 내용이 없네요
그냥 클라이언트 컴포넌트로 봐도 무방할듯 싶습니다.
코드를 보면 그냥 데이터를 받아서 넘겨주는 형식입니다
slug로 페이지 번호와
사진에서 보듯 페이지 이름과 번호를 받고 있네요
이걸 활용해서 select 코드를 짜면 되겠군요
여기도 select 코드가 조금 지저분할것 같긴 합니다..
디테일 페이지에서는
기존에 스토어에서 데이터를 가져와서
props로 넘겨받은 slug 값을 활용해서 페이지를 구성하는데요
이걸 리엑트 쿼리로 변경해야합니다
기존에 넘겨받던걸 전부 같은 값으로 맞춰서 해결했네요
이제 리엑트 쿼리로 동작하도록 변경했습니다.
블로그 페이지는 이제 fetch 기본기능이 아니라 리엑트 쿼리로 동작합니다
뭔가 조금 깔끔해진 기분이네요
기존에 useState로 받던 데이터를 전부 useRef로 변경하고
렌더링은 useQuery의 isSuccess 값이 true가 되면 useEffect를 통해 진행되도록 변경했습니다
이제 렌더링 관련 오류는 발생하지 않네요
방명록 부분도 수정해야겠습니다.
아직 mutation을 해본적이 없는데
이번기회에 해봐야겟군요
공식문서를 읽어보니
mutation 부분은 useQuery랑 매우 비슷하네요
쿼리 펑션이 뮤테이션 펑션으로 들어가는군요
일단 내용은 숙지하고 내일 나머지 작업을 해야겠네요
스테픈 2km완료
