#zustand

질문 8
해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

18일 전 · aigoia 님의 답변 업데이트

자기주도적인 개발이 너무 어렵습니다.

안녕하세요.🙇‍♂️ 올해 3월에 부트캠프를 수료하고 취업준비를 하고있는 프론트엔드 지망생입니다. 부트캠프를 통해 js, react, vue, tailwind, zustand등의 스택을 주로 사용하며 프로젝트를 만들었습니다. 부트캠프를 진행하면서 react에서 useEffect훅은 컴포넌트의 생명주기 사이 ~때에 사용한다, 페이지 라우팅 기능을 사용하려면 리액트 라우터 같은 라이브러리를 활용해서 써야한다, 테일윈드가 현재 개발시장에서 가장 많이 쓰이는 CSS 라이브러리다 이런 정도로 기술스택들이 학습되었습니다. 이제 부트캠프도 수료하고 혼자 공부하는 시간이 찾아왔는데 어떤것 부터 어느정도 까지 손을 대야할지 감이 잡히질 않습니다. 1. 어떤것 부터 해야하는지 예를 들어 현재 저에게 가장 부족하다고 생각하는 스택은 next 프레임워크, zustand 외의 전역 상태관리(recoil, redux), 필수 개발 외의 인프라적인 스택?(Storybook, monorepo, sentry, jest )이라고 생각하는데 이 지식들의 우선순위를 정하는 방법과 이 외에도 개발자 시장에서 반드시 장착하고 있어야 하는 필수 스택에 무엇이 있는지를 알고싶습니다. 2. 어느정도 까지 손을 대야할지 예를 들어 React 같은 경우엔 하나의 프로젝트를 만드는 역량까진 가능해졌지만 프로젝트 안에서 퀄리티 있는 디자인 패턴이라던지, 사용해보지 못한 수많은 리액트 메서드들을 딥다이브 해봐야 할 거 같은데, 어느정도 까지 공부해야 너무 깊게 들어가지 않고, 현재 개발시장에서 경쟁력 있는 지식을 쌓았다고 할 수 있는지의 경계를 모르겠습니다. 강사님의 강의에서 벗어나 혼자서 주도적인 학습을 진행하려고 하니 시간낭비를 하게 될 거 같고, 겉햝기 식으로 공부하는 나날을 보내게 될까 심적으로 큰 부담이 됩니다.. 현업 개발자님들의 조언을 듣고싶습니다!!🙇‍♂️🙇‍♂️🙇‍♂️

개발자

#프론트엔드

#프론트엔드-취업

#공부방향

#공부법

답변 2

댓글 2

조회 605

5달 전 · 익명 님의 질문 업데이트

Next 서버 컴포넌트와 전역 상태관리

안녕하세요. Next15에서 서버 컴포넌트를 적극적으로 도입하여 프로덕트를 개발하고 있는데, 고민이 되는 부분이 있어 여러 분들의 도움을 얻고자 질문을 남깁니다. 서버 컴포넌트에서 받아온 데이터와 클라이언트 컴포넌트에서 사용하는 zustand가 적절히 사용되고 있는지 고민이 듭니다. 현재 GET 요청의 경우 각각의 서버 컴포넌트에서 fetch를 통해 진행하고, 해당 데이터를 자식 클라이언트 컴포넌트에서 사용할 경우 props로 내려 사용하고 있는데, 이때, 드릴링이 심해질 경우 zustand와 같은 전역 상태관리 라이브러리를 함께 사용하려고 합니다. 예를 들어, 서버 컴포넌트의 첫 번째 자식인 클라이언트 컴포넌트에서 zustand를 사용하고, 이후 자식 클라이언트 컴포넌트에서는 zustand를 통해 상태관리 할 때 자식인 클라이언트 컴포넌트의 업데이트가 진행되는 부분에서 try/catch를 통해 요청을 보내고, router.refresh()를 통해 서버 컴포넌트에서 데이터를 새로 받아옵니다. 이후 클라이언트 컴포넌트에서는 useEffect로 서버 컴포넌트에서 props로 받아온 데이터가 바뀌는 것을 감지하고, 해당 props를 zustand에서 사용하는 데이터로 업데이트하려고 하는데 문제가 될만한 점이 있을까요? 이와 관련된 링크나 답변이 있으시다면 감사히 받겠습니다!

개발자

#next.js

#상태관리

#rsc

#서버컴포넌트

답변 0

댓글 0

추천해요 2

조회 135

7달 전 · kmj0973 님의 질문

개인 프로젝트 피드백 부탁드립니다!! (Next.js + firebase)

안녕하세요! 휴학 중에 개인 프로젝트 한번 만들어봤습니다! 아직 감이 잘 안 잡히다보니 chatGPT에 꽤나 의존했던 것 같습니다. 폴더 구조와 ssr, csr 사용 부분에서 피드백을 받고자 합니다! 또, containers 폴더 안 create 폴더에 있는 RouteChangeListener.tsx를 사용하여 퀴즈를 만들거나 푸는 도중에 현재 페이지를 벗어나려는 움직임을 감지하면 alert 창이 나오도록 설정하였습니다. 제가 생각해봤을 때 페이지가 이동했다가 다시 돌아오는 부분이 비효율적이라고 생각이 들어서 미들웨어나 다른 방법을 통해 해결할 수 있는지 여쭤보고 싶습니다. 감사합니다! 프로젝트 설명 : 퀴즈를 만들고 풀 수 있는 웹페이지 만들어봤습니다! vercel로 배포하였고, PWA 사용하여 모바일에서도 다운로드 가능하게 했습니다! 웹 앱 둘다 가능하지만 웹으로 봐주시는 것을 권장드립니다~!! 프로젝트 기술 스택: Next.js, react-query, zustand, firebase 테스트 아이디: 123@naver.com 테스트 비밀번호: 123123 GitHub 주소 : https://github.com/kmj0973/donquiz Vercel 배포 주소 : https://donquiz.vercel.app/ 따끔한 피드백 주시면 감사드리겠습니다!! 감사합니다!!

개발자

#react

#개인-프로젝트

#next.js

#firebase

#react-query

답변 0

댓글 0

추천해요 2

조회 94

일 년 전 · 상현 님의 새로운 답변

react 전역 상태 관리 도구 사용

안녕하세요~! 최근에 프론트엔드를 배우게 되어서 여쭤봅니다.. react 를 사용하면서 props drilling 을 겪고, 복잡한 코드가 되어 가는 중입니다. 궁금한 점은 zustand를 전역 상태 관리 도구로 사용하고 있는데 zustand를 어떻게 사용해야 잘 사용하는 것 일까요? 렌더링을 조금 깔끔하게 하고 싶어서 문의드립니다. 상황에 따라 다르겠지만 zustand를 많이 써서 state를 store 형태로 보관해서 사용하는게 좋을까요? 전문가들의 고견 부탁드립니다.(_ _)

개발자

#react

#zustand

#front-end

#props-drilling

답변 1

댓글 0

조회 76

일 년 전 · 익명 님의 질문 업데이트

프론트엔드 취준 이력서,포폴 고민

안녕하세요. 현재 부트캠프 다니는 학생입니다. 취업준비를 위해 포트폴리오, 이력서 비중을 둬야하는 것은 알지만 "포폴을 만들때 어느정도의 수준까지 만들어야 얼어붙은 취업시장의 경쟁력이 있는 포폴이 되는지 궁금"합니다 포토로폴리오 같은 경우 현재 부트캠프 외에 팀원들과 따로 만들고 있지만, 취업시장의 기대치에는 부족함을 느꼈습니다. <분리수거 배출방법 알려주는 프로젝트> typescript, styled-componets, zustand, firebase 등만 사용해서 진행하였는데 아주 간단하다보니 트러블슈팅도 없었고, 더 나아가 분리수거와 관련된 api를 활용하고자 했는데 해당 api도 없어서 분리수거 관련 퀴즈 기능, 동영상 추가 기능을 만들어볼 계획이고, moking data인 배출방법, 로그인, crud만 있는 프로젝트입니다..

개발자

#취준

#리액트

답변 0

댓글 0

조회 120

일 년 전 · 김하늘 님의 새로운 답변

상태 관리 라이브러리 무엇을 선택해야할지 궁금합니다.

프론트엔드 부트캠프 수강 중인 학생입니다. 현재 팀 프로젝트를 들어가기전에 상태관리 라이브러리를 활용해서 간단한 redux(CRUD), zustand(CRUD)까지 구현 해봤습니다. 질문1) 팀플젝을 장점인 많은 zustand로 하려고 했으나 취업 합격자들, 취업어플 정보들을 봤을때 redux와 recoil이 많더라구요. 그래서 저도 redux, recoil을 한정해서 플젝을 해야할까요? 질문2) zustand로 플젝해도 회사 자격요건에 회사에서 redux를 쓴다던가 redux경험 우대사항이 적혀 있다던가 하면 불이익이 있을까요?

개발자

#react

#recoil

#zustand

#redux

답변 1

댓글 0

조회 89

일 년 전 · 익명 님의 새로운 댓글

부트캠프 수료까지 3주.. 현업 선배님들의 취업 조언이 필요합니다

현재 부트캠프 프론트엔드 과정을 듣는 코린이입니다 개발을 시작하기 전 영상제작 / 디자인 업계에서 3년정도 일을 했었어서 자연스럽게 프론트엔드를 선택하게 되었고 현재 부트캠프 마지막 프로젝트를 마무리 하는 과정에 있습니다. . 이제 취업이 점점 현실로 다가오면서 걱정이 많이 생겨서 몇 가지 궁금했던 내용들을 질문으로 남겨 봅니다..! 현업 선배님들의 현실 꿀팁 부탁드립니다! 1. 신입 프론트엔드 개발자로 취업할 때, 부트캠프 출신이라는 단점(?)을 극복할 수 있는 노하우가 있을까요? 2. 현재 React, TypeScript, Zustand 를 사용한 프로젝트를 하고 있는데 기술스택이 현재 시장에 적합한가요? 3. 프로젝트 기획(S.A 작성, MVP 설정) + 개발 + AWS 배포 + 2~3주간 유저테스트 까지 FE 3명, BE 3명 디자이너 1명이서 진행중인데 이러한 프로젝트가 강점으로 작용하나요? 4. 현업 선배님들이 신입을 채용할 때 < 이거 있으면 눈길이 간다! > 하는 이력서 항목이나 스킬이 있을까요? ** 많이 부족하지만.. Github 링크도 첨부해봅니다 https://github.com/Dustyspac

개발자

#react

#프론트엔드

#신입

#부트캠프

#취업

답변 1

댓글 1

조회 162

일 년 전 · 익명 님의 질문

react-query 와 zustand

현재 react-query와 zustand를 같이 쓰면서 고민이 있습니다. 현재코드는 useQuery를 통해 데이터를 가져오고 그 데이터를 가공해서 zustand에 넣어놓고 데이터를 수정하거나 추가등의 변화가있을 때 useMutaion onSuccess -> queryClient.invalidateQueries를 통해 자동으로 갱신하게 로직을 작성했어요. 이렇게 작성하면 데이터를 수정하거나 추가등의 변화가있을 때 마다 최신데이터가 갱신되기는 하지만 서버에 재요청을 해야하는 단점이 있어서 useMutaion onSuccess -> queryClient.invalidateQueries를 통해 자동으로 갱신하는 부분을 zustand에 추가로 데이터를 넣어주고 새로고침할때만 useQuery로 데이터를 받아오는 방식으로 변경할려고 해요. 근데 이렇게되면 새로고침하지 않으면 다른사람이 갱신한 데이터는 가지고 있지 못하게 되요. 서버 요청횟수를 줄이는 것보다 최신데이터를 가지고 있는게 더 중요한가요? 제 지인은 유저는 사이트안에서 계속왔다갔다 거릴거라 대부분은 최신데이터를 즉각적으로 갱신시켜줄 필요가 없다고 하고 저도 이 말이 맞는거같은데 다른사람들은 어떻게 생각할지 궁금해서 질문드립니다..

개발자

#react

#react-query

#zustand

#nextjs

답변 0

댓글 0

조회 483

일 년 전 · 유길종 님의 댓글 업데이트

nextjs app router

많이들 사용하시나요? 사용한다면 어느 조합으로 사용 하고 계신지 궁금합니다. 주로 궁금한거는 기존의 v13 or v14, 기존의 css-in-js 사용이 불가능한 상황에서 스타일링에는 무엇을 사용하는지, 별도의 데이터 패칭 라이브러리(swr, tanstack-query)와 전역상태도구(zustand, jotai)를 사용하는지. 음 기존 page router 쓰시던 분들은 프로덕션 레벨에서도 마이그레이션 해서 사용중인지도 궁금하네요 추가로 특정 조합에 장점이 있는지도 궁금합니다 감사합니다!

개발자

#react

#next.js

#frontend

답변 1

댓글 3

조회 457

일 년 전 · 익명 님의 새로운 댓글

프론트엔드개발자 미니 프로젝트

안녕하세요! 현재 왔다갔다 고민 중인 그런.. 상황입니다 ㅎㅎ 고민인 사항은 기존 todolist 를 리팩토링하는게 좋을지, 새로운 프로젝트를 만들어보며 좋을지 가 고민 사항입니다. 기존에 리액트를 학습하면서 정말 기본의 crud 만 구현해놓은 프로젝트가 있습니다. 그 흔한 context api를 사용하지 않은 상태입니다..ㅎㅎ zustand, tanstack query, ts 등등 이 스택들을 이제 막 익혀보려는 상황에 있는데요.. (습득 아닙니다 이제 막 시작하려고해요ㅠㅠ) 공식문서를 읽는다 해도 직접 사용해보지 않아서 잘 모르겠더라구요.. 그래서 저 스택들의 기여가 적어도 일단 적용은 해서 익혀볼까? 라는 마음인데 기존의 todolist 에 뭐 검색, 최신순 정렬 등의 기능을 추가하면서 저 스택들을 사용해볼까 , 아님 아예 새로운 미니 프로젝트를 각잡고 만들어보는게 나을까 싶은 고민입니다.. todo가 작은 프로젝트인데 규모에 비해 과하게 기술을 적용하는건가? 싶기도 하고 포트폴리오에도 넣어야하는데 todo 넣는게 맞나.. 다들 이렇다 할 프로젝트를 내놓는 마당에 아예 각잡고 새로운 프로젝트를 해야하는지 참 고민인 시점입니다 ㅠㅠ 아니면 리액트쿼리, zustand 등 익히기 위해서 괜찮은 학습방법에 대해 공유해주셔도 감사할 것 같습니다. 쏟아지는 기술들에 도대체 뭐부터 해봐야하나 정신이 혼미한 상태이므로...ㅎㅎ 도움이나 의견 주시면 감사하겠습니다 !!

개발자

#프로젝트

#고민

#프론트

답변 2

댓글 7

조회 394

일 년 전 · 익명 님의 질문 업데이트

zustand의 equality function의 파라미터가 같은 값을 반환합니다

안녕하세오 zustand 사용 중 궁금한게 있어 글 쓰게 되었습니다 zustand는 이전 값과 변경된 값을 비교해서 true가 리턴되면 리렌더링이 일어나는 것으로 알고 있는데 값이 객체일때 acion으로 객체를 수정하게 되면 이전 값도 바뀐 값으로 콘솔에 찍힙니다. 원시값일땐 이전값과 변경한값이 잘 찍히는데 객체만 이러는 이유가 있을까요? 뭔가 놓치고 있다면 답변 주시면 감사하겠습니다.

개발자

#react

#zustand

답변 0

댓글 0

조회 34

2년 전 · 곽성준 님의 새로운 답변

이런 상황에서의 zustand 활용에 대한 질문있습니다 !

안녕하새요 ! zustand를 이용해서 프로젝트를 진행중인데 새로운 기능을 추가해야되는 상황입니다… 한 페이지에서 5개의 입력폼이 담긴 카드에 정보를 입력받아 (각 카드마다 드랍다운,데이트피커,텍스트필드 등 종류 및 갯수도 상이합니다) submit을 해주어야하는데 현재 상태관리로 zustand를 사용하고있습니다 ! 이러할때 각 카드마다 하나의 스토어를 구성해서 submit시에 합쳐서 넘기는것이 나을지… 아니면, 하나의 스토어에서 전부 관리하는게 나을지… ( 이경우엔 각각 상태값과, action들이 너무 많을것같아서…) 혹시 이런 상황에서는 보통 어떻게 관리하는게 맞을까요..?!

개발자

#react

#zustand

답변 2

댓글 0

조회 222

2년 전 · 강경석(핸디) 님의 새로운 답변

React 상태관리 라이브러리에 대해서 질문있습니다 !

안녕하세요 새로운 프로젝트를 들어가기전 라이브러리를 고민중입니다. 한번도 사용해보지않은 zustand 혹은 jotai 를 사용해보고싶은데… 보통 zustand나 jotai를 사용할때 비동기처리 같은 부분도 해당 라이브러리만 이용하는지… 아니면 redux나 react-query 를 같이 사용하는지 궁금합니다…! 그리고 다른분들도 선호하시는 라이브러리가 있으시면 알려주십셔 !!! 감사합니다 !!!

개발자

#react

#frontend

답변 1

댓글 0

조회 162

2년 전 · 익명 님의 질문 업데이트

react,vue 에서의 빈번한 store 사용

1. 어떤 프로젝트는 전역상태관리를 많이 사용하돼, 특정 페이지에서만 사용하지만, 상태관리가 잘 되어있는 프로젝트가 있고, ( 전역상태에 대한 사용 기준보단, 상태관리 자체에 더 집중함 ) 2. 또 어떤 프로젝트는 전역상태관리 store 를 정말 필요성이 있거나, 각 다른 컴퍼넌트나 페이지에서 공통으로 사용할 state 를 사용할때만, 전역관리 store 를 사용하는 프로젝트가 있습니다. ( 전역상태 사용 기준이 엄격함) 이번에 리드개발을 맡게되어 store 사용에 대한 정의가 필요한데, 어떤 것이 더 좋을까요? 각 어 떤 장단점이 있고, 또 어떤 기준으로 전역상태로 관리할지, 지역상태로 관리할지 정하시는지 경험을 듣고 싶습니다. 추가적으로 , 제 기준에선 zustand 가 정말 사용하기에 편하더라구요, 누구든 쉽게 터득할수 있고.. 프로덕션에서 RTK 와 zustand 각각 어떤 장단점이 있을까요?

개발자

#react

#redux

답변 0

댓글 0

조회 106

2년 전 · Ed 님의 답변 업데이트

nextjs 전역 상태관리 질문

안녕하세요 nextjs(App router 사용)로 프로젝트를 진행하고 있는데, 전역상태를 정의하기 위해서 zustand를 사용하려고 하고 생각중입니다. 전역 상태를 정의하기 위해서는 1. 가장 root가 되는 layout.tsx에 provider를 불러와 감싸주어, 전역적으로 참조할 수 있도록 하는 것 2. persist middleware을 사용해서 LocalStorage에 저장하는 방식으로 상태를 관리하는 것 이 정도 두 가지가 있는 것 같은데, 질문은 1. 만약 1번 방법을 사용한다면 client component로 선언한 custom provider로 자식 컴포넌트를 감싸게 될텐데, 그러면 상태가 변경됨에 따라 하위 컴포넌트들(server, client 상관없이)이 모두 리렌더링 되는 것인가요? 만약 그렇게 된다면 SSR의 의미가 사라지는 것 아닌가요? 2. 일반적으로 nextjs에서는 전역 상태를 어떤 식으로 관리하나요? 입니다. 감사합니다!

개발자

#next.js

#zustand

#상태관리

답변 1

댓글 0

조회 1,389

2년 전 · 조용구 님의 답변 업데이트

선배님들께 입사 한 달 차 프론트 커리어 고민상담 받고싶습니다.

안녕하세요. 저는 입사 이제 한 달 차가 되어가는 신입 프론트엔드 개발자 입니다. 저는 개발을 좋아하고 관심이 많아서 작년 12월부터 프론트 공부를 시작하게 됐습니다. 그리고 운이 좋게 6월에 취업을 하게 되었습니다. 프론트엔드 개발을 하면서 js, ts, next.js, react-query, redux, zustand등 배워야할 게 정말 많았습니다. 그래서 프로젝트를 하면서 얕게나봐 최신 기술을 많이 공부해봤습니다. 하지만 제가 취업한 회사에서는 하드웨어 기술적 제약때문에 최신 기술을 사용하지 못하고 사용적인 제한이 굉장히 많아서 커리어적으로 성장을 할 수 있을지 고민이 많이 됩니다. 물론 아직 부족하기 때문에 배울 것이 많다는 것을 알지만 요즘 it회사들을 보면 회사 기술 사용 스택을 보면 ts, react-query, next.js, storybook 등 트랜디한 기술을 많이 사용하는 것 같습니다. 경력 없는 신입 취업도 요즘 힘들고 해서 경력을 쌓고 이직을 해야하나 생각을 하고 있는데 최소 1년을 경력을 쌓으려고 생각을 하고 있습니다. 제가 목표로 하는 회사의 기술 스택을 봤는데 ts, react-query, next.js, zustand, emotion 등을 쓰고 있더라고요. 하지만 개발을 하다보면 js공부가 핵심이고 많이 부족하구나를 많이 느낍니다.. 신입 이직을 할 때 중요한 점이 무엇인지 궁금합니다. 3년차 미만이면 코딩테스트를 준비해야할 수도 있다고 하는데 알고리즘 공부를 꾸준히 하는 것이 중요할까요?? 그리고 저런 기술들을 사용한 사이드 프로젝트를 얼마나 해야할까요?? 혹자는 하나만 프로젝트 제대로 해도 면접에서 말하기 부족하다고 하는데, 요즘 취업 준비생들의 스펙을 보면 프로젝트도 많이하고 하는 것 같아서 궁금합니다.. 그리고 선배님들 성장 비결은 무엇인지 무엇으로 공부를 많이 하는지도 궁금합니다. 요즘 저는 깃허브에서 완성된 프로젝트 코드를 보면서 공부를 좀 해보고 있는데 괜찮을까요?? 적다보니 두서없이 적었는데 읽어주셔서 감사합니다. 커리어적 조언과 신입 이직을 위해서 무엇을 준비해야하는지 어떻게 하면 이런 상황에서 성장을 할 수 있는지 궁금합니다..!! 욕심은 많은데 부족함을 많이 느껴서 이렇게 글 적어봅니다..

개발자

#react

#프론트엔드

#프론트엔드-취준

#커리어-고민

#이직

답변 1

댓글 0

추천해요 1

조회 473

2년 전 · 김병연(Vintz) 님의 새로운 댓글

리액트 상태관리, 어떻게 하고 계신가요?

안녕하세요, 주니어 프론트엔드 개발자입니다. 현재 저는 어드민 프로젝트를 리액트로 만드는 작업을 하고 있습니다. 프로젝트 규모가 꽤 크다보니, 상태관리에 대해 많은 고민을 하고 있어요. 그 동안 내가 알던 리액트가 맞나 싶을 정도로 상태에 대해 다시 생각해보고 있습니다. 처음에는 상태관리 라이브러리 없이 작업을 했습니다. 나름대로 기획서를 보고 상태를 저마다의 컴포넌트에 넣어 사용했어요. 그런데 진행하다보니 다른 곳에서도 해당 상태를 사용해야하는 일이 빈번하게 발생해서, 수정하는 시간이 길어질 때가 많았습니다. 그래서 결국 전역 상태관리 라이브러리(zustand)를 사용하게 됐어요. 막상 사용해보니 정말 좋았습니다. 제가 생각한 장점은 다음과 같아요. - 사용할 컴포넌트에서 바로 사용이 가능하다. - 스토어에서 뽑아 사용하다보니 데이터 동기화가 비교적 쉬웠어요. - 스토어별로 파일을 분리하고, 해당 로직만 담겨 있어 파악하기가 쉽다. - 며칠 뒤에 봐도 이어서 작업하기가 좋았습니다. - 이전에는 상태들이 어느 컴포넌트에서 쓰이는지 헷갈릴 때가 많았어요. - 컴포넌트는 뷰 컴포넌트로, 비즈니스 로직이 스토어에 담겨 있어서 좋았어요. 제 짧은 경험에 느낀 장점들로 계속 사용하고는 있지만 자꾸 의문이 듭니다. 거의 모든 상태들을 스토어에 담아 사용하다보니 '전역' 라이브러리의 역할에 맞지 않다고 생각이 들어요. 페이지 간에 공유하는 상태는 없다보니 context api도 고려해봤지만, zustand와 달리 하위 컴포넌트가 리렌더링이 되고, 해당 api는 다크 모드같은 기능에 쓰고, 러닝커브가 비교적 적은 zustand를 선택했습니다. 결론은, 여러분은 상태관리를 어떻게 하고 계신지 궁금합니다. 어떠한 기준이 있는지, 전역 상태관리 라이브러리는 어떤 경우에 쓰는지 등 제가 경험이 적고 혼자 프론트 개발을 하다보니 모든 의견 하나하나가 소중합니다. 리액트 상태관리에 대한 선생님들의 고견을 부탁드립니다.

개발자

#react

#상태관리

#zustand

#hooks

답변 1

댓글 1

추천해요 8

보충이 필요해요 1

조회 1,675

2년 전 · 익명 님의 새로운 댓글

리액트에서 전역상태를 컴포넌트의 렌더링에 맞춰서 initial 값을 주려면 어떻게 하면 좋을까요

상태 관리 라이브러리로는 zustand를 사용하고 있습니다. 지금 생각나는 것은 context provider와 useEffect 정도인데, useEffect는 이전 값이 남아있어 렌더링 시 잔상이 보이는 문제가 있더라고요 ㅠㅠ 그래서 useefftect return에도 setter를 넣어줬는데.. 혹시 다른 방법이 있을까 싶어서.. 질문 드립니다. 컴포넌트 생성 시와 종료에 맞춰 값을 변경해주고 싶은 상황입니다.

개발자

#react

#zustand

#contextprovider

#useeffect

답변 2

댓글 1

조회 480

일 년 전 · 상현 님의 새로운 답변

Next 13과 react 18 서버 컴포넌트 관련 질문 (질문이 좀 길어요)

안녕하세요, 요즘 next 13과 react 18 서버 컴포넌트에 대해서 본격적으로 파고 있는데 궁금한 점들이 여러가지 떠올라서 글 올립니다. 1. data fetching 방식의 변경 우선 기존에는 동적인 data fetching의 경우, getServersideProps를 통해서 페이지의 root에 전달해주고는 방식이 일반적이었는데 서버에서만 돌아가는 서버 컴포넌트가 나오면서 data fetching을 컴포넌트 단위로 할 수 있게되면, 기존에 사용하던 getServersideProps 같은 유틸 함수들은 사라지는건가요? 기존에는 정적 데이터면 getStaticProps, 동적 데이터면 getServersideProps, 유저 상호작용이 필요한 데이터면 client side useEffect를 많이 사용했는데 next 13부터는 이게 뭔가 뒤섞이는 것 같아서 혼란스럽네요. next 13을 위한 data fetching 패턴이나 방법론이 있나요? 2. 기존에 사용하던 상태 관리 프레임워크의 변화 위와 어느정도 연결되는 이야기입니다. 기존에 react-query를 많이 사용했는데 next 13부터 컴포넌트 레벨로 데이터를 요청할 수 있고 또 next 차원에서 요청 중복 제거를 지원하게되면 react-query 처럼 서버 상태관리와 캐싱을 강점으로 내세우는 프레임워크의 역할을 어떻게 되는건가요? 서버 상태를 컴포넌트 레벨에서 가져올 수 있다고 해도, 여전히 전역 상태 관리가 필요할 것 같은데 recoil, redux, zustand 같은 상태 관리 프레임워크도 계속 쓰게되는 것일까요? 계속 쓰게 된다고 하면 서버 컴포넌트와의 호환성은 어떻게 되는건가요? 만약 전역 상태 관리를 써야하는 컴포넌트라면 서버 컴포넌트가 될 수 없는 것인가요? 3. 서버 구성의 변경 다른 곳은 모르겠지만, 저는 next 백엔드를 단순히 요청을 전달하는 용도로만 쓰고 실제로 중요한 로직은 다른 백엔드 서버에서 처리하는 구조를 가지고 있었습니다. 하지만, next 13을 보니 서버 컴포넌트에서 DB 연결을 직접해서 데이터를 가져오는 예시들도 있더군요. 사이드 프로젝트라면 모르겠지만, 실 서비스에서도 서버 컴포넌트 - DB 직접 연결 이라는 구조가 성립할 수 있는건가요? 기존에 데이터를 취합하고 내려주던 백엔드 서버의 역할이 생략되는거라고 생각해도 되는건가요? 4. 왜 다시 20년 전으로 돌아가는거죠 제가 20년 동안 개발한 것은 아니지만, 예전에는 웹페이지를 서버에서 완전히 로드해서 내려주는 형태를 가지고 있었다고 배웠습니다. 그러다가 개개인의 기기가 스펙이 좋아지면서 서버 부하를 줄이고 클라이언트 쪽에서 역할을 분담하는 방식이 떴다고 들었어요. react도 처음에는 이런 프레임워크로 나왔다고 알고 있습니다. 그러다가 next, remix 같은 프레임워크들이 서버사이드 렌더링을 적극적으로 장려하면서 다시 회귀하고 있다고 들었습니다. 최근에는 react 마저 서버 컴포넌트를 발표했잖아요. 왜 이제와서 다시 서버 쪽에서 페이지를 로드하는 방식을 추진하고 있는건가요? 질문을 적고보니 좀 길어졌는데, 서핑을 좀 해봐도 마땅히 도움이되는 글이 별로 없어서 현직자들은 어떻게 생각하시는지 의견을 얻고자 질문 올립니다!

개발자

#react

#next.js

#react-query

답변 6

댓글 4

추천해요 78

보충이 필요해요 1

조회 5,948

2년 전 · 익명 님의 새로운 댓글

리액트에서 상태관리로 Redux를 무조건 공부해야할까요?

안녕하세요 저는 풀스택 개발자이고 2년만에 다시 리액트를 공부하려고 합니다. 얼마전에 리액트 2023 로드맵을 봤는데요 (사진 첨부했습니다.) 해당 로드맵에서 언급된 상태관리중 어떤걸 공부해야할지 고민됩니다. 상태관리 - 추천: Recoil, Zustand, Context - 대안: Redux / Toolkit, Mobx 2년전에는 Redux는 상태관리에서 거의 필수라고 했던 것 같은데 로드맵에서는 Recoil, Zustand, Context를 추천하고 Redux는 대안이라고 언급하네요. 요즘 리액트를 공부하게되면 Redux는 굳이 공부할 필요 없을까요? Recoil을 공부해보려고 하는데 Redux도 같이 공부해야하는 고민됩니다. 긴글 읽어주셔서 감사합니다.

개발자

#react

#recoil

#redux

#state

답변 2

댓글 2

추천해요 1

조회 788