리액트 심화

recoil

recoil 페이스북에서 출시한 React 전용인 전역 상태 관리 라이브러리이다. 공식 레퍼런스 ↓↓↓ https://recoiljs.org/ko/docs/introduction/motivation 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 기존 전역 상태관리 라이브러리의 문제 기존에 사용되었던 Redux나 Mobx가 성능 자체에 문제가 있던 것이 아니라 오히려 Flux 패턴을 기반으로 안정적이지만 여러가지 문제가 존재했다 React 전용 라이브러리가 아니기에 React가 볼 때 Store가 외부의 어떤 것이며 동시성 모드를 구현하기에 호환성이 떨어진다 복잡한 보일러 ..

react-query

클라이언트/서버 상태 프론트엔드 개발시에 다루는 상태는 클라이언트 상태와 서버 상태로 크게 두가지가 있다 클라이언트 상태 - view를 위한 데이터 한 유저만을 위한 데이터(세션간 지속될 필요 없는 데이터) 렌더링에 반영하기 위한 데이터 →컴포넌트의 state를 화면에 보여줄때, input의 state, 동기적으로 저장되는 redux store의 데이터 등 서버 상태 - 서버에서 가지고 오는 데이터 여러 유저가 공유해야 하는 데이터(세션간 지속되어야 하는 데이터) DB에 저장되어 있는 데이터 → axios로 api를 호출해서 자원을 가져오는 경우 react-query 서버 상태를 관리하기 위한 상태 관리 라이브러리이다. API 요청에 특화 서버의 값을 클라이언트 쪽에 가져오거나 캐싱, 업데이트, 에러 핸..

createAsyncThunk

우선 아래 링크를 참고하여 redux tool kit에 대한 설정을 하자 https://duckgugong.tistory.com/315 Redux Tool kit Redux Took kit? 리덕스를 사용하려면 작성해야할 코드와 파일이 기본적으로 너무 많다 → 보일러플레이트가 증가한다! Redux Tool Kit은 리덕스를 편하게 사용하는데 유용한 패키지가 들어있는 도구 duckgugong.tistory.com createAsyncThunk? redux에서 비동기 처리를하기 위해 사용한 미들웨어 redux thunk와 마찬가지로 redux tool kit에서는 creatAsyncThunk를 사용할 수 있는데 따로 미들웨어 설정을 할 필요 없이 redux tool kit에서 기본적으로 제공해준다! 사용법 ..

React+Mock API - Concurrently

Why? React와 Mock API를 구동하기 위한 서버가 다르기 때문에 json-server나 node.js로 구축한 서버를 동시에 실행 시키려면 각각 다른 명령 프롬프트에서 실행 시켜야 한다! 예를 들어 아래처럼 각각 다른 프로젝트를 열어서 실행시켜야 한다..ㅠㅠ // 리액트 프로젝트에서 yarn start // mock api를 사용하는 프로젝트에서 yarn json-server --watch db.json --port 5008 하지만 concurrently를 사용하면 한 터미널에서 서버 두개를 한번에 실행 시킬 수 있다! 사용법 리액트 설치 yarn create react-app test json-server 설치 yarn add json-server concurrently 설치 yarn add..