# Recoil

393개의 포스트
post-thumbnail

[전역상태관리] Recoil

개인 포트폴리오를 만드는 과정에서 다크모드를 구현해보고 싶어 구현 하던중최상위에서 상태를 관리해야 효율적이겠다는 생각이 들어 전역상태관리 라이브러리인 Recoil을 사용해보았다.전에 팀 프로젝트에서도 Recoil을 써본 경험이 있는데, Redux보다 설정하는게 쉽고 간

약 16시간 전
·
0개의 댓글
·
post-thumbnail

상태관리 라이브러리

상태관리 라이브러리 리덕스 공부하면서 상태관리 라이브러리에 대해서도 정리하게 되었다. 상태관리 라이브러리에 대해 알아보자 What - 상태관리 라이브러리란 무엇인가 이름 그대로 상태를 관리하는, 즉 state 관리를 목적으로 하는 라이브러리이다. Why - 상태관

2일 전
·
0개의 댓글
·
post-thumbnail

React의 상태 관리

프론트엔드에서 상태란 무엇일까? 주로 유저 정보나 UI에 영향을 미치는 \_\_<span style="background-color:상태는 특정 컴포넌트 내에서만 관리되는 로컬 상태와 여러 컴포넌트에서 관리되는 전역 상태로 구분지을 수 있다.특정 컴포넌트 안에서만

3일 전
·
1개의 댓글
·
post-thumbnail

React 전역상태 관리

"어플리케이션의 화면에 영향을 끼치는 자바스크립트 객체" 라고 생각하면 된다. 보통은 이를 통칭해 "변화하는 데이터" 라고 일컫는다.지역상태 (Local State)컴포넌트간의 상태 (Cross Component State)전역상태 (Global State)특정 컴포

4일 전
·
0개의 댓글
·
post-thumbnail

[멋사] 8주차 사전과제 - Recoil (vs Context API)

전역 상태에 대해 공부 + 정리 Recoil 공식 문서 보면서 공부 + 정리 context와 recoil 비교 Recoil > React 프로젝트를 위한 전역 상태관리 라이브러리 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 보내줄 수 있지만, 컴포넌트의 깊이

4일 전
·
0개의 댓글
·
post-thumbnail

#5: Context API를 Recoil로 변경하기 (recoil test)

useState를 사용해 ToDo-List TDD 적용해보기Context API(TodoProvider) Test 해보기useState로 관리하던 상태를 ContextAPI로 변경 + 기능추가 ToDo App에 삭제, 토글, 수정 기능 추가하기 👈 NOW이번에는 Co

5일 전
·
0개의 댓글
·
post-thumbnail

[React] 컴포넌트 간 데이터 공유 방법

📌 하나의 페이지에서 다른 페이지로 넘어갈때, 어떠한 방식들을 사용하여 넘기는지 알아보자.React를 공부하는 사람들이면 페이지간 이동을 Router를 사용하여 구현을 해보았을 것 이다.만약 현재 페이지에서 쓰이는 데이터가 다음 페이지에 사용된다면, 어떻게 그 데이터

6일 전
·
0개의 댓글
·
post-thumbnail

상태관리 라이브러리 사용후기

우리는 상태를 관리하기 위해서 기타 라이브러리의 힘을 빌리거나 직접 그 기능을 구현하기도 한다. 하지만 먼저 우리가 왜 써야하는지 부터 알아야 한다. 라이브러리를 도입하는 것은 좋으나 항상 합당한 이유와 함께 같이 쓰는 것이 좋기 때문이다.먼저 근본적인 질문이다. 우리

7일 전
·
0개의 댓글
·
post-thumbnail

Recoil

Recoil은 말이죠.

2023년 5월 22일
·
0개의 댓글
·
post-thumbnail

데이터 호출의 효율성

데이터 저장 방식이 바뀌면서 데이터를 불러오는 방법도 바뀌었는데, 해당 과정을 수정하면서 데이터를 불러오는 과정도 다시 한번 훑어보게 되었다. 그런데 아니나 다를까 Style페이지와 clothes페이지에 필요한 데이터들을 공통된 상위 파일에서 useEffect를 사용해

2023년 5월 21일
·
0개의 댓글
·
post-thumbnail

Recoil과 Custom Hooks패턴으로 리팩토링 후기

프로젝트에서 채팅 게임을 만들고 있었다.채팅에 턴, 시간제한 등 여러 게임요소가 추가되며 다음고 같은 문제점이 발생했다.상태 관리가 복잡해졌다.로직 코드가 길어졌다.이를 개선하기 위해 Recoil과 Custom Hooks 패턴을 도입하는 리팩토링을 진행했다.기존의 컴포

2023년 5월 21일
·
0개의 댓글
·
post-thumbnail

Recoil localStorage 연결 및 sessionStorage

Local Storage Persistence 사용해보자

2023년 5월 16일
·
4개의 댓글
·

React를 활용한 여행 일정 계획 애플리케이션 개발

우리는 react를 사용합니다.jwt를 발급받기 때문에 토큰을 사용한 인증입니다.추후 oauth2를 적용해 볼 것입니다.우리는 recoil을 이용해서 전역을 관리하고react-query를 이용해서 비동기에 대한 전역도 관리할 예정입니다.이를 위해서는 약간의 준비과정이

2023년 5월 15일
·
0개의 댓글
·
post-thumbnail

Recoil의 구성요소

Recoil의 구성요소

2023년 5월 15일
·
0개의 댓글
·

React Recoil - Selector

Selector는 atom의 output을 변형시키는 도구이다. atom은 배열만 줄뿐, 그 output을 변형시키는 것은 selector이다. 하지만 state자체가 변하는것은 아니다. useRecoilValue를 사용하여 atom의 output도 얻을 수 있고 s

2023년 5월 12일
·
0개의 댓글
·
post-thumbnail

[React Recoil] 공식문서 톺아보기②

1. 설치 2. atom 3. selector

2023년 5월 6일
·
0개의 댓글
·
post-thumbnail

[React Recoil] 공식문서 톺아보기①

https://recoiljs.org/ko/docs/introduction/motivationAtoms은 상태의 단위로, 업데이트와 구독할 수 있다. 각각의 atom이 업데이트 될 때마다, 이를 구독한 컴포넌트들은 리렌더링된다. atom을 구독한 모든 컴포넌트

2023년 5월 6일
·
0개의 댓글
·
post-thumbnail

Recoil과 Recoil Selector를 이용하여 비동기 처리하기

이 문서는 Recoil 공식문서를 참고하여 제가 이해한 방식으로 작성한 글입니다. 틀린 부분이 있으면 알려주시면 감사하겠습니다!Recoil팀에서 말하는 React 자체에 내장된 상태 관리 기능의 한계점은 다음과 같다.컴포넌트의 상태는 공통된 상위요소까지 끌어올려야만 공

2023년 5월 5일
·
0개의 댓글
·
post-thumbnail

Recoil을 활용하여 전역 로그인 모달 만들기(1)

최근에 프로젝트를 진행하면서 디자이너스 처럼 로그인 페이지를 따로 만들지 않고, 화면 오른쪽에서 모달로 추정되는 컴포넌트에서 처리 가능하게끔 만들기로 했다. 분석해보니 다음과 같은 특징들이 있었다. 모달 등장시 url이 바뀌지 않는다모달 등장시 현재 위치한 페이지가 어

2023년 5월 3일
·
0개의 댓글
·