개발 공부

redux-saga- redux-saga는 redux-thunk 다음으로 많이 사용하는 비동기 작업 관련 미들웨어다. - redux-thunk는 함수 형태의 액션을 디스패치해 미들웨어에서 해당 함수에 스토어의 dispatch와 getState를 파라미터로 넣어서 사용하는 원리로, 구현한 thunk 함수 내부에서 원하는 API 요청도 하고, 다른 액션을 디스패치하거나 현재 상태를 조회하기도 했다.- 대부분의 경우에는 redux-thunk로 충분히 기능을 구현할 수 있으나, redux-saga는 좀 더 까다로운 상황에서 유용하다. 1. 기존 요청을 취소 처리해야 할 때(불필요한 중복 요청 방지) 2. 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API 요청 등 리덕스와 관계 없는 코드를 실행할 때 3..

redux-thunk- 리덕스 사용 프로젝트에서 비동기 작업을 처리할 때 가장 기본적으로 사용하는 미들웨어 * thunk- thunk는 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미함. const addOne = x => x + 1;const addOneThunk = x => () => addOne(x);const fn = addOneThunk(1);setTimeout(() => { const value = fn(); // fn이 실행되는 시점에 연산 console.log(value);}, 1000); redux-thunk 함수 예시const sampleThunk = () => (dispatch, getState) => { // 현재 상태를 참조할 수 있고, ..

React Redux- 리액트 애플리케이션에서 리덕스를 사용하면 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있어 코드 유지 보수에 도움이 된다. - 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수도 있다. 사용 라이브러리 - redux 및 react-redux 라이브러리를 설치한다. 컴포넌트 분리 - 리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것이다. 프레젠테이셔널 컴포넌트-  주로 상태 관리가 이루어지지 않고, 그저 props를 받아 와서 화면에 UI를 보여 주기만 하는 컴포넌트  컨테이너 컴포넌트- ..

React 생명 주기- 리액트는 컴포넌트가 생성, 변경, 소멸되는 등의 생명 주기(Lifecycle)을 가진다.- 각 생명 주기에 해당하는 메서드가 존재하는데, 총 9가지가 있다.- 이 생명 주기는 총 세 가지로 마운트(생성), 업데이트(변경), 소멸(언마운트) 카테고리롤 나뉜다. 라이프 사이클 메서드의 사용- 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다.- 이때는 컴포넌트의 라이프사이클 메서드를 사용한다.- 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있으며, 함수형 컴포넌트에서는 Hooks 를 사용하여 비슷한 작업을 처리할..

React 프로젝트 생성- 리액트 프로젝트는 간단한 명령어 하나로 생성할 수 있다.- npm 혹은 yarn 을 이용하여 프로젝트를 생성한다. yarn- yarn은 npm을 대체할 수 있는 도구로 npm 보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공한다.- yarn은 npm을 이용하여 설치할 수 있다.# yarn 설치$ npm install -g yarn# 설치 확인$ yarn --version 프로젝트 생성- yarn 을 설치했다면 다음 명령어를 통해 React 프로젝트를 생성할 수 있다. $ yarn create react-app [프로젝트명] - yarn을 이용하지 않는다면 npm 명령어를 이용해서 설치할 수도 있다. $ npm init react-app [프로젝트명] - 위 두 명령..