상태관리를 분리했을때의 장점에 대해서 생각해보았다 (스테픈 2km완료)

상태관리를 분리했을때의 장점에 대해서 생각해보았다 (스테픈 2km완료)

image.png

그간 서버와 클라이언트의 상태관리를 분리시킨다는 부분을 고민조차 해본적이 없다.

그 이유는 비동기로 동작하는 서버의 데이터와 동기적으로 처리하는 클라이언트의 이벤트들을 보면

당연히 분리시켜 관리하는게 효율적이겠지만

이 당연한 걸 깊게 고민해본적이 없는것 같다.

요 몇일간 리엑트 쿼리에 대해서 공부하고 글을 작성하면서

이렇게 서버와 클라이언트의 상태관리를 분리시켰을때 엄청나게 큰 장점이 있다는걸 알게되었다.

자세한 내용은 리엑트 쿼리 기술블로그에 작성할 생각이지만

머리속에 정리가 아직 다 되지 않은 상태이긱도 하고

지금 내가 만들어둔 next.js 의 블로그 프로젝트에 도입해볼 생각이 있기 때문에

next.js에 react-query를 도입하면서 한번 다시 정리해보려고 한다.

내 블로그 프로젝트에는 서버 상태관리를 해야하는 부분이 몇곳이나 있을까 생각해봤다.

일단 외부 api를 사용하는

image.png

블로그 페이지이다.

아마 해당 컴포넌트에서 직접 fetch로 데이타를 요청해서 화면에 뿌려주는 방식으로 사용중인데

이 부분은 리엑트 쿼리를 도입해서 처리가 가능하리라 생각된다.

그리고

image.png

방명록을 작성하는 이 부분도

외부 api를 사용하는 중이기 때문에

충분히 가능하다고 생각한다.

이 2곳에 적용시켜야하는데

next.js에서 서버컴포넌트로 페이지를 이동하는 블로그 페이지의경우

서버컴포넌트에서도 react-query 가 동작해야해서

https://velog.io/@bohongu/Next.js%EC%97%90%EC%84%9C-React-Query-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-v5

next.js에서 사용하는 방법에 대한 블로그 글을 조금 참고해보려고 한다.

뭐 공식문서도 참고해가면서 해야할듯 하다.

react에서는 단순하게 쿼리 클라이언트 프로바이더를 사용하면 되서 간단하지만

next.js는 ssr이어서 조금 사용방법이 달라진다.

일단 차근차근 설명을 읽어보며 이해하는 시간이 필요할듯 하다.


스테픈2km완료

image.png

Coin Marketplace

STEEM 0.17
TRX 0.15
JST 0.029
BTC 61968.29
ETH 2501.95
USDT 1.00
SBD 2.66