# Recoil
[WIL] 실전프로젝트 4주차 버그잡기
실전 프로젝트 4주차가 되었다. 여전히 자동로그인 부분에 막혀있는데, 다른 자잘한(?) 버그들이 계속 나오면서 수정을 거듭하고 있다. 수정했던 부분을 기록해 보려고 한다.
[TIL] Atoms와 Selectors란?
Recoil을 사용하면 Atoms에서 Selectors를 거쳐 React 컴포넌트로 내려간다이 말이 아직 잘 이해가 가지 않는다. Atoms는 무엇이고 Selectors는 무엇일까?Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 각각
Recoil을 사용하자..
Recoil은 React를 위한 상태관리 라이브러리이다.🤔 Recoil은 context-api의 단점인 provider로 감싸진 부분의 업데이트가 되지 않은 state에도 리렌더가 일어나는 점을 보완해서, 업데이트된 state 부분만 리렌더를 해준다...
[React] Recoil을 활용한 상태관리
프로젝트 진행하면서 Recoil 이라는 라이브러리를 알게되었습니다.Redux도 같이 알아보려 하였지만, 현재의 소규모 프로젝트에서 Recoil 의 도입이 조금 더 쉽다고 생각하였기에 바로 학습 해보았습니다.일반적으로 React의 상태관리는 useState 를 많이 사용
[TIL] Recoil을 사용해야 하는 이유는 무엇일까?
이 질문에 대답하기 위해서는 먼저 '상태 관리'에 대해서 알아야 한다.리액트에서는 부모 컴포넌트의 state를 자식 컴포넌트에서 사용하기 위해서 props를 이용한다. 만약 자식 컴포넌트에서 props를 변경하고 싶다면 부모로부터 state를 변경하는 함수를 또 pro
recoil 과 props의 적절한 사용
onChange같은 즉각적인 부분에 사용할 때는 props로... recoilState은 비동기 느낌이라 바로 안받아들여짐
TIL[23일차]로그인!!!!!
중요한 로그인! 로그인은 모든 사이트에 다 있지만 생각보다 깊이가 있는 어려운 문제이다. 예전 방식과 요즘방식을 이해하고 JWT토큰(증표)를 저장하기! 로그인의 역사 회원가입과 로그인은 다르다. 회원가입은 user라는 테이블을 만들고 저장하면 된다. 새로운 게시글
react-hook-form 파일업로드
회원가입 페이지에서 아직 하지못한 이미지파일업로드가 남아있어서 오늘은 이미지파일 업로드, 서버로 URL형식으로 보내기 , 다시 서버로 요청해서 보냈던 URL 받아서 이미지 보여주기! 를 해보았다.하루종일 걸리긴했지만 나름 성공적으로 된것 같다.우선 나는 회원가입페이지
[React] Recoil
호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. 그러나 React는 다음과 같은 한계가 있다.컴포넌트의 상태는 공통된 상위요소까지 끌어올려야만 공유될 수 있으며, 이 과정에서 거대한
[Redux] vs Recoil
Recoil을 사용해 봤고 Redux를 공부하면서 차이점이 궁금해서 찾아보았다.가장 큰 공통점으로는 둘 다 상태 관리 라이브러리라는 것이다.무엇을 선택해야 하는지를 알기 위해서는 각각의 특징을 알아보았다.Recoil만 사용해 보았을 때는 몰랐지만, 사용해보니 러닝커브가
React _ Recoil을 활용한 전역 상태 관리 도입 후기
이번에는 Recoil을 도입해서 작은 어플리케이션을 만들어 본 후기와 recoil의 기본적인 개념에 대해 정리해보겠습니다.
📆 22.11.16 - Recoil 매스터 #2, React-Datepicker에서 날짜 데이터를 백엔드에서 원하는 값으로 바꿔보기
📆 22.11.15 - IntersectionObserver, Modal 구현 시, Background Scroll 막기 및 stopPropagation으로 이벤트 버블링 막기
지금까지 scroll 이벤트로 재는 것을 IntersectionObserver 가 대신 해준다. 주로 스크롤과 관련있는 애니메이션을 넣는데 용이하다.추가로 intersectionRatio를 사용하면 감시하고 있는 요소가 어느정도에 도달했는지 알려준다고 한다. 이 기능을
📆 22.11.14 - Recoil 매스터
이전에 쓰던 redux, redux-toolkit 이 너무 불편했기 때문recoil의 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 쓰임상태의 단위이며 업데이트되면 이 단위를 사용한 컴포넌트는 새로운 값을 반영하여다시 렌더링사용하려면 리
Recoil로 상태관리하기(feat. SSR...)
단방향 바인딩을 하는 라이브러리인 react는 부모 컴포넌트에서 자식컴포넌트로만 state를 props로 전달할 수 있고 자식의 props를 부모에게 전달하는 방법은 존재하지 않는다. Flux 패턴기존의 MVC 패턴의 단점을 해결하기 위해 Flux 패턴이 등장했다.
Recoil : 리액트 상태 관리 라이브러리
atom은 key와 default를 property로 가지고 있는 객체를 파라미터로 받는 함수이다.key값에는 "고유한 값"이 들어가야 한다 ! (atom으로 만들 global state에 대해서 제각각 다른 고유 값을 가지고 있어야 함, key가 같다면 같은 stat