리덕스를 사용하고 있는 어플리케이션에서 모든 상태관리를 리덕스를 통해 해야 할까? 아니면 적절하게 어떤건 리덕스에, 어떤건 컴포넌트에 저장해놓고 사용하면 될까? 적절하게의 기준은 뭘까? 리덕스 툴킷 공식 홈페이지에서 제안한 리덕스 아키텍처 best practice에 대해서 알아보고자 한다. 리덕스란?리액트에서 state는 두 가지 성격으로 나눌 수 있는데, 전역 state와 로컬 state로 나뉜다고 볼 수 있다. 리덕스는 전역 state(상태) 관리를 도와주는 툴로 가장 대중적으로 사용되는 라이브러리다. 그리고 리덕스 툴킷은 기존에 리덕스를 작성하기 위해 요구되었던 불편함들을 해소하고 리덕스를 작성하는 표준 방법을 제공하기 위해 만들어진 라이브러리다. 리덕스보다 사용이 간편하고 보일러플레이트도 더 적다..

React에서는 다양한 Hooks을 제공하고 있다.useState, useEffect, useContext, useCallback, useMemo 등..그런데 Hook이란 뭘까? 우리는 Hook을 함수처럼 사용하지만 그렇다고 일반 함수랑은 분명히 다르다.Hook이란?훅은 함수다.그런데 일반 함수와 결정적 차이가 있다.바로 리액트의 상태 시스템, 라이프사이클(useEffect)을 사용할 수 있도록 만든 것이 훅이다.아래의 예시를 통해 쉽게 알아보자.// 일반 함수function add(a, b) { return a + b;}// 훅function useCounter() { const [count, setCount] = useState(0); return [count, () => setCount(cou..

심플 버전 보러 가기 [React] 클라이언트에서 pagination 구현하기 1. (심플버전) 심플한 버전과 복잡한 버전 2 가지 페이지네이션 중 심플한 버전을 구현해보자. 1. 클라이언트에서 페이지네이션 구현하는 경우는 언제인가? 백엔드에서 부득이하게 pagination 기능을 제공할 수 kasts91.tistory.com 실제로 유튜브 연동을 구현하면서 닥친 문제를 해결하기 위해 구현한 기능이므로, youtube 데이터를 예시로 설명을 작성했다. 하루 10,000unit만 주어지고, youtube api를 한 번 호출할 때마다 1unit이 감소한다. (unit을 다 쓰면 api호출이 불가능해진다.) 말이 10,000unit이지 테스트 할 때 하루만에도 다 써버리는 적은 양이므로 최대한 api호출을 ..

복잡버전 보러가기 심플한 버전과 복잡한 버전 2 가지 페이지네이션 중 심플한 버전을 구현해보자. 1. 클라이언트에서 페이지네이션 구현하는 경우는 언제인가? 백엔드에서 부득이하게 pagination 기능을 제공할 수 없을 때 사용할 수 있다. 백엔드에서 주는 데이터가 방대하지 않아서 클라에서 전체 데이터를 한번에 받음으로써 api호출 양을 줄이고 싶을 때. 써드파티 api를 사용하는데, 하루/한달 단위 api호출 양(unit)이 한정적일 경우, 최대한 api호출 횟수를 줄이기 위해 사용할 수 있다. 예를 들어 youtube api 호출을 하루에 100번만 가능하다. 유저에게 pagination기능을 제공하고 싶은데 이전페이지, 다음페이지 마다 api호출이 가는걸 최대한 막고 싶다. 나는 한 페이지당 5개의..