자료 감사합니다!!! 이제 JS, React 하나씩 배우는 중인데 업무적으로 recoil 을 써야해서 찾다가 오게 되었네요 ㅋㅋㅋ 계속 돌려보면서 조금씩 익히고 있습니다 :) 감사합니다!! 그래서 말인데... 혹시...완전 초보용 - uesState도 모르는.. 그런.. 완전 초보.. 용도 만들어주시면....!!!ㅋㅋㅋ 개인적으로 너무 좋을 것 같습니다 :) 잘 보고 있어요!
감사합니다 도움이 됬다니 넘 감동이네요 🥲 좀 느릴 수도 있다고생각해서 Zustand 설명은 좀 빠른 템포로 자세한 설명은 넘기며 만들어봤는데 th-cam.com/video/nrljw-UwBcU/w-d-xo.html 요것도 한번 보시면 좋을거같아요! 감사합니다 열심히 해볼게요!!
context API만 사용하여 전역 상태 관리를 해보다가 다른 라이브러리는 어떠한지 알 필요가 있다고 느껴서 공부하는 중에 이 영상을 봤습니다. 아직 context API, recoil, zustand, redux 등의 상태 관리 라이브러리들이 어떤 장/단점을 가지고 있는지 그려지지 않아 애매한 기분이에요. 프로젝트에 사용할 라이브러리를 선택하는 방법이 각각의 장/단점에 있을 것 같은데 ! 이런 부분들 비교하는 영상도 찍어주시면 감사드립니다ㅎㅎㅎㅎㅎㅎㅎ 영상 구성이 정말 알차요 !! 그리고 더 깊게 알려주셔도 기꺼이 소화하고 싶습니다 >
새로고침시 메모리에 있던 값들이 초기화되서 생기는 문제인데요! 로그인을 했다면 서버db에 장바구니에 담긴 아이템을 저장하는 코드를 작성해줘야해고, 로그인하지 않았다면 브라우저에서 제공하는 로컬스토리지는 새로고침시 초기화되지 않아서 로컬스토리지에 값을 저장하곤합니다 로컬스토리지에는 key,value 형태로 값을 저장할 수 있어 window.localStorage.setItem(key,value) 로 저장하고, window.localStorage.getItem(key)로 값을 가져올 수 있습니다. 직접 localstorage에 접근해서 저장해주는 로젝을 추가해줘도되고, 이 과정이 복잡하다면 저는 사용해본적이 없지만 recoil persist라는 라이브러리를 추가로 설치해 사용하는것도 방법이 될것 같습니다!
프로젝트 사이즈에 따라 다르겠지만 전역적으로 쓰이는 상태관리가 필요하다면 Recoil이 아니더라도 상태관리 라이브러리는 사용하는걸 추천드립니다. 오히려 라이브러리 사용을 극단적으로 피해야 할 특별한 이유가 있을때 상태관리 라이브러리를 빼도되나? 가 더 큰 고민일 만큼 생산성, 유지보수 용이성이 주는 이점이 다른 단점을 상쇄할 만큼 충분히 커서 도입할 가치가 있다고 생각합니다! + Recoil도 내부적으로는 Context Api로 되어있고, 상태관리 라이브러리를 사용해도 Context Api 사용이 유용할 때가 있습니다. 상호 보완(?) 적인 것 같습니다
안녕하세요! 조만간 다른 상태관리 라이브러리도 리뷰하면서 다뤄보도록하겠습니다 :) Zustand 역시 Recoil과 마찬가지로 React에서 전역상태를 '쉽게' 관리하는데 사용하는 라이브러리이지만, 몇가지 차이점이 있는데요 제가 사용하면서 느낀 차이점은 1. 먼저 문법에서 보면 Zustand 는 Redux 에 더 가깝습니다(flux패턴) Zustand 는 상태를 만들면서 해당 상태를 변경하는 함수도 같이 선언해 변경함수를 컴포넌트에서 끌어다 쓰는 방식이라면, Recoil은 Atom을 선언하고 컴포넌트 이곳저곳에서 SetState 함수 통해 다양한 방식으로 값을 변경할 수 있습니다. (Atomic 패턴 이 점이 리액트 같은 문법으로 쓸 수 있어서 좋다는 분도있고, Redux에 익숙하신 분들 중엔 이질적이라고 느끼는 분들도 있어서 호불호 인것같습니다) 2. 기본제공하는 기능 Recoil은 파생데이터를 다루는 Selector와, Suspense기능과 함께 비동기 데이터를 처리하는 기능이 기본으로 제공됩니다. Zustand 는 브라우저 스토리지를 사용하는 Persist 기능을 기본제공합니다 개인적으로 Zustand 는 심플하게 '상태관리'라는 점에 집중하는 라이브러리라는 생각이 듭니다. 추가로 Recoil은 아직 1.0버전이 아닙니다 (정식버전이 아닌 실험버전) , Typescript 를 사용할때는 개인적으로 Recoil이 타입을 지정할때 더 편한 것 같습니다
개인적으로는 사실 Recoil이나 다른 상태관리 라이브러리를 사용할때도 기본적으로 제공하는 '상태관리' 기능 외에 다른 기능 (persist 등) 은 잘 사용하지 않아서 크게 불편함을 느끼고 있지는 않습니다. 프론트엔드 라이브러리들이 워낙 순식간에 바뀌고 있어서 어떻게 될거라고 예측은 못하겠지만 Recoil 역시 다른라이브러리와 마찬가지로 이미 도입한 기업도 있고 충분히 프로덕션 레벨에서 사용할만한 라이브러리라는 생각이듭니다! 핵심인 상태관리 하나만 놓고봤을때 문제가 생기지는 않으니 도입했을때 큰 문제는 없지만 그래도 업데이트가 늦다는게 아쉽기는 하네요😮💨 여러가지 고려해서 선택해야하지만 다들 압도적인 성능차이가 있는것도아니고 고만고만해서 이쯤이면 상태관리 라이브러리들도 거의 취향의 영역이 아닌가하는 생각도 해봅니다🤣
![[제로초뉴스]2024년 리액트 개발자라면 이 영상만 보시면 됩니다(트렌드 라이브러리 정리)](http://i.ytimg.com/vi/k0oqyokMm5Y/mqdefault.jpg)
![[A5] 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다.](http://i.ytimg.com/vi/L1dtkLeIz-M/mqdefault.jpg)
실습하며 공부하는게 편한 구독자님들을 위해 스타일링, 요구사항이 적힌 예시 파일을 깃허브에 올려놨습니다
오늘도 화이팅 ✨
github.com/jobkaeHenry/jobkae-recoil-example-completed
자료 감사합니다!!! 이제 JS, React 하나씩 배우는 중인데 업무적으로 recoil 을 써야해서 찾다가 오게 되었네요 ㅋㅋㅋ 계속 돌려보면서 조금씩 익히고 있습니다 :) 감사합니다!!
그래서 말인데... 혹시...완전 초보용 - uesState도 모르는.. 그런.. 완전 초보.. 용도 만들어주시면....!!!ㅋㅋㅋ 개인적으로 너무 좋을 것 같습니다 :) 잘 보고 있어요!
우와 쉬운 설명 정말 감사합니다. 구독하고 잘 배우겠습니다.👍
와,, 리덕스 쓰다가 리코일 영상 찾아보는데 깔끔하고 이해하기 쉽게 영상편집도 잘하시고 내용도 어렵지않게 설명해주시네용! 속도도 딱 좋아요 !
감사합니다 도움이 됬다니 넘 감동이네요 🥲 좀 느릴 수도 있다고생각해서 Zustand 설명은 좀 빠른 템포로 자세한 설명은 넘기며 만들어봤는데 th-cam.com/video/nrljw-UwBcU/w-d-xo.html 요것도 한번 보시면 좋을거같아요!
감사합니다 열심히 해볼게요!!
덕분에 프로젝트 관리가 쉬워졌어요!! 정말 감사합니다 >.
쉽고 이해가 쏙쏙 잘돼요~! 영상 많이 올려주세요!!
설명도 잘하시고, 편집도 깔끔해서 너무너무 유익했습니다! 회사코드를 context api에서 리코일로 개선하려고 여기저기 찾아보고 있었는데 너무너무 도움이 됬습니다 감사합니다!
도움이 되셨다니 다행입니다! 고생많으시겠네요..😢앞으로 더 유용한 정보로 준비해와보겠습니다!
오우 shit... 꼼꼼하면서 친절한 초보자 눈높이 맞춤 강의감사합니다 떡상 가즈아....!!!! 영상 퀄리티, 톤, 화면 구성등등 너무 최고에요
설명 아주 잘하시네요 잘배우고갑니다
잘 배우고 가요! 감사합니다.
와 진짜 쉽게 설명해주시네요 react-query랑 recoil 조합이 요즘 가장 많이 사용하던데, 간단한 예시로 설명해주시면 좋을거 같아요 ㅎ
리코일 예제코드 여기만큼 쉽게 가르쳐주는곳 못봤어요 감사감사
너무 잘 들었습니다! 추가 강의로 get 말고 set 사용법도 알려주실 수 있나요?ㅎㅎㅎ
context API만 사용하여 전역 상태 관리를 해보다가 다른 라이브러리는 어떠한지 알 필요가 있다고 느껴서 공부하는 중에 이 영상을 봤습니다. 아직 context API, recoil, zustand, redux 등의 상태 관리 라이브러리들이 어떤 장/단점을 가지고 있는지 그려지지 않아 애매한 기분이에요. 프로젝트에 사용할 라이브러리를 선택하는 방법이 각각의 장/단점에 있을 것 같은데 ! 이런 부분들 비교하는 영상도 찍어주시면 감사드립니다ㅎㅎㅎㅎㅎㅎㅎ 영상 구성이 정말 알차요 !! 그리고 더 깊게 알려주셔도 기꺼이 소화하고 싶습니다 >
리코일 예제코드 잘배우고갑니다!😊
혹시 코드를 깔끔하고, 현업차처럼 작성하는법도 궁금한데 다뤄주실 수 있나요?😮
감사합니다😆 관련 영상도 한번 준비해보도록할게요!
th-cam.com/video/alb3OZfsqjM/w-d-xo.html
원하시던것인지 잘 모르겠지만 클린코드 관련 영상 업로드했습니다😊
(TMI) 순수함수면 모두다 캐싱을 지원한다는게 아니고 리코일이 순수함수를 표방하며 만들어져있기 때문에, 캐싱을 구헌하도록 내부적으로 설계 되어있다는 얘기입니다!
recoil의 장점은 잘 이해되었습니다! 그런데 한 가지 질문이 있습니다. 장바구니에 상품을 담아놓고 새로고침을 하면 장바구니 목록도 다시 업데이트가 되는 문제는 어떤 식으로 해결하면 좋을까요?
새로고침시 메모리에 있던 값들이 초기화되서 생기는 문제인데요!
로그인을 했다면 서버db에 장바구니에 담긴 아이템을 저장하는 코드를 작성해줘야해고, 로그인하지 않았다면 브라우저에서 제공하는 로컬스토리지는 새로고침시 초기화되지 않아서 로컬스토리지에 값을 저장하곤합니다
로컬스토리지에는 key,value 형태로 값을 저장할 수 있어
window.localStorage.setItem(key,value) 로 저장하고,
window.localStorage.getItem(key)로 값을 가져올 수 있습니다.
직접 localstorage에 접근해서 저장해주는 로젝을 추가해줘도되고, 이 과정이 복잡하다면 저는 사용해본적이 없지만 recoil persist라는 라이브러리를 추가로 설치해 사용하는것도 방법이 될것 같습니다!
@@jobkaeHenry recoil persist는 처음 들어보는데 함 공부해봐야겠네요! 감사합니다~~
토탈개수를 state로 관리할 때 왜 Atom이 아닌 Selector를 사용해야 하나요?
현업에서의 프로젝트가 큰 규모가 아니여도 리코일을 사용하는건 오버스택은 아닌가요? 컨텍스트로만 사용해도 되는지 아님 도입을 해도 괜찮은지 궁금하네요
프로젝트 사이즈에 따라 다르겠지만 전역적으로 쓰이는 상태관리가 필요하다면 Recoil이 아니더라도
상태관리 라이브러리는 사용하는걸 추천드립니다.
오히려 라이브러리 사용을 극단적으로 피해야 할 특별한 이유가 있을때 상태관리 라이브러리를 빼도되나? 가 더 큰 고민일 만큼
생산성, 유지보수 용이성이 주는 이점이 다른 단점을 상쇄할 만큼 충분히 커서 도입할 가치가 있다고 생각합니다!
+ Recoil도 내부적으로는 Context Api로 되어있고, 상태관리 라이브러리를 사용해도 Context Api 사용이 유용할 때가 있습니다. 상호 보완(?) 적인 것 같습니다
@@jobkaeHenry 답변 감사합니다 영상 알고리즘에 떠서 시청해봤는데 설명을 이해하기 쉽게 잘하시고 도움이 많이 되었네요 현업에서 개발하고 있지만 배우고 가네요! 다른 영상에서 언급 되었던데 msw를 이용해서 jsw 토큰 체킹하는 컨텐츠도 한 번 보고싶네요
배열보다 객체로 사용하는게 성능상 이점이 있을듯
상태관리 Zustand 이거랑 비교도 해주실수 있나요?
안녕하세요! 조만간 다른 상태관리 라이브러리도 리뷰하면서 다뤄보도록하겠습니다 :)
Zustand 역시 Recoil과 마찬가지로 React에서 전역상태를 '쉽게' 관리하는데 사용하는 라이브러리이지만, 몇가지 차이점이 있는데요 제가 사용하면서 느낀 차이점은
1. 먼저 문법에서 보면 Zustand 는 Redux 에 더 가깝습니다(flux패턴) Zustand 는 상태를 만들면서 해당 상태를 변경하는 함수도 같이 선언해 변경함수를 컴포넌트에서 끌어다 쓰는 방식이라면, Recoil은 Atom을 선언하고 컴포넌트 이곳저곳에서 SetState 함수 통해 다양한 방식으로 값을 변경할 수 있습니다.
(Atomic 패턴 이 점이 리액트 같은 문법으로 쓸 수 있어서 좋다는 분도있고, Redux에 익숙하신 분들 중엔 이질적이라고 느끼는 분들도 있어서 호불호 인것같습니다)
2. 기본제공하는 기능
Recoil은 파생데이터를 다루는 Selector와, Suspense기능과 함께 비동기 데이터를 처리하는 기능이 기본으로 제공됩니다. Zustand 는 브라우저 스토리지를 사용하는 Persist 기능을 기본제공합니다 개인적으로 Zustand 는 심플하게 '상태관리'라는 점에 집중하는 라이브러리라는 생각이 듭니다.
추가로 Recoil은 아직 1.0버전이 아닙니다 (정식버전이 아닌 실험버전) , Typescript 를 사용할때는 개인적으로 Recoil이 타입을 지정할때 더 편한 것 같습니다
Zustand 관련 영상 업로드 완료했습니다! 도움이 됬으면 좋겠네요 :)
홈, 장바구니를 왔다갔다하면 화면이 좌우로 왔다갔다합니다. Main과 Cart가 형제라 하나 옆에 있는걸로 인식하는 것 같은데 동일한 위치에서 화면만 바뀌게 할 수 있을까요? 개인 프로젝트에서 동일한 문제를 겪고 있습니다 ㅎㅎ
아시다시피.. 코드를 봐야알거같습니다..ㅠ 깃헙 주소주시면 시간될때 한번 찾아보겠습니다
@@jobkaeHenry 아 댓글에 공유해주신 깃 예시파일에서 나타난 현상입니다!
현업에서는 recoil이 업데이트 지원이 지속적으로 되지 않아 도입을 꺼려하는 것으로 알고있는데 이 부분에 대해서는 어떻게 생각하시나요?!
개인적으로는 사실 Recoil이나 다른 상태관리 라이브러리를 사용할때도 기본적으로 제공하는 '상태관리' 기능 외에 다른 기능 (persist 등) 은 잘 사용하지 않아서 크게 불편함을 느끼고 있지는 않습니다.
프론트엔드 라이브러리들이 워낙 순식간에 바뀌고 있어서 어떻게 될거라고 예측은 못하겠지만 Recoil 역시 다른라이브러리와 마찬가지로 이미 도입한 기업도 있고 충분히 프로덕션 레벨에서 사용할만한 라이브러리라는 생각이듭니다!
핵심인 상태관리 하나만 놓고봤을때 문제가 생기지는 않으니 도입했을때 큰 문제는 없지만 그래도 업데이트가 늦다는게 아쉽기는 하네요😮💨
여러가지 고려해서 선택해야하지만 다들 압도적인 성능차이가 있는것도아니고 고만고만해서 이쯤이면 상태관리 라이브러리들도 거의 취향의 영역이 아닌가하는 생각도 해봅니다🤣
context api가 있어서 이젠...
왜 안 zustand시죠?
리덕스는 왜 아직도 사용되는건가
redux랑 비슷한 기능 같네요
네 맞습니다! 같은 용도로 사용되는 상태관리 라이브러리입니다 😃😃
recoil 업데이트가 거의 중단된거 같습니다. 참고하시길..
recoil vs zustand
Recoil은 모르겠고 존잘인건알겠다!
과찬이십니다..🙃 앞으로 Recoil을 더 잘 아실 수 있도록 제작해보겠습니다😆
엄청난 설명 + recoil의 장점을 보니 redux는 앞으로 손절하겠습니다.
설명은 진짜 잘하시는데 얼공은 안하시는게 더 좋을것 같네요. 간간히 튀어나오는 얼굴 때문에 집중이 안됩니다.
recoil 업데이트가 거의 중단된거 같습니다. 참고하시길..