React (35) 썸네일형 리스트형 Redux 톺아보기 1 - (redux-toolkit) 상태 관리 라이브러리인 Redux를 공식 문서에서 적극 사용을 권장하는 redux-toolkit을 톺아보면서 조금 더 제대로 된 사용법을 익혀보고자 한다. [ Redux Toolkit ] Redux Toolkit # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit Redux Toolkit은 효율적인 Redux 개발을 위해 개발되었으며, Redux 로직을 작성하기 위한 표준 방식이 되도록 만들어졌으며, 사용하기를 적극 추천한다. Redux Toolkit에는 저장소 준비, 리듀서 정의, 불변 업데이트 로직, 액션 생산자나 액션 타입을 직접 작성하지 않고도 전체 상태 "조각"을 만들어내는 기능까지 Redux에 사용되는 유틸리티 함수들이 들어.. Redux 톺아보기 0 - ( 핵심 컨셉, 적절한 사용, 개념 및 용어 ) 새로운 기술을 접하고 적용할 때 해당 기술을 잘 사용하는 방법 중 하나라고 생각하는 기술의 핵심 컨셉 이해하기. 기술의 핵심 컨셉을 이용하고 사용한다면, 과하게 사용하는 일을 피하거나 필요한 순간 적절히 사용할 수 있지 않을까 싶다. [ 그래서 Redux 핵심 컨셉이 뭔데? ] 리덕스 핵심 컨셉을 공식 문서를 통해 살펴보자. { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: false }], visibilityFilter: 'SHOW_COMPLETED' } 우리의 애플리케이션의 state가 위처럼 평범한 오브젝트 형태로 정의되어 있다고 생각해 보자. 예를 들어 투두 앱의 상태는 위의 예시 오브젝트의 형태로 만들어.. React 관심사 분리 고차 컴포넌트(High Order Component)란? 리액트 공식 문서의 고차 컴포넌트(HOC)에 관한 문서이다. 여기서는 HOC에 대해서는 컴포넌트를 전달받아 새로운 컴포넌트를 반환한다 정도로만 짚고 넘어가면 될 것 같다. HOC에 대해 알아보기 전 횡단 관심사가 무엇인지 살펴보겠다. 횡단 관심사(Cross-Cutting Concerns) 횡단 관심사란 단일한 기능이 여러 지점에 걸쳐 나타나는 것을 말한다. ❓위의 짧은 설명으로는 여전히 횡단 관심사가 무엇이고 고차 컴포넌트와 무슨 상관이 있는지 모호하기 때문에 인증과 인가로 예를 들어보겠다. 웹 어플리케이션에서는 유저를 중심으로 관련된 여러 가지 정보를 처리하게 되므로 인증 / 인가는 중요한 관심사이며, 중요한 관심사인 만큼 애플리케이션의 곳곳에서.. React 기본 정리 이름이 수정되면 안되는 파일 public / index.html : 페이지 템플릿 public 폴더에는 index.html에서 사용하는 파일들만 넣는다. favicon 파일을 예로 들 수 있다. src / index.js : 자바스크립트 시작점 src 폴더에는 JS 파일과 CSS 파일들을 넣는다. 또한 Webpack은 src 폴더에 있는 파일만 확인한다. 때문에 해당 폴더 외의 폴더의 파일들은 Webpack에 의해 처리되지 않는다. (대부분의 리액트 소스 코드들은 이곳에 작성하면 된다.) *Webpack은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. package.json : 해당 프로젝트에 대한 정보들이 들어있다... Infinite Scroll & pagination API Infinite Scroll & pagination을 사용하면 한 번에 많은 양의 데이터를 렌더링 하지 않고 적절한 양의 데이터를 렌더링 후 사용자의 액션에 따라 다음 데이터를 렌더링 시킬 수 있습니다. 우선 게시판 등에서 많이 사용되는 pagination API에 대해 살펴보도록 하겠습니다. pagination react-js-pagination Simple, easy to use component for pagination. Compatible with bootstrap paginator stylesheets. Latest version: 3.0.3, last published: 3 years ago. Start using react-js-pagination in your project by runn.. Redux toolkit 사용 프로젝트가 더 복잡해질수록 Redux를 올바르게 사용하기도 복잡해집니다. 이번 게시글에서는 Redux를 조금 더 쉽게 관리하는 방법을 알아보도록 하겠습니다. // 리덕스 로직을 저장 // 0. redux import import { createStore } from "redux"; const initialState = { counter: 0, showCounter: true }; // 2. Reducer 함수 생성 후 Action에 대한 작업 설정 - State의 초깃값 설정 필수 // (Reducer 함수는 항상 객체를 새로운 반환하고 반환된 객체는 store에 저장) const countReducer = (state = initialState, action) => { if (action.type ==.. Redux의 State를 올바르게 사용하는 방법 Redux의 올바른 State 관리법 이번 게시글은 Reducer 함수에서 반환하는 State 객체에 대해 정리해보도록 하겠습니다. Redux는 기존의 State를 대체하여 항상 새로운 State 객체를 반환합니다. 따라서 Reducer 함수에서 반환하는 객체는 중요하지 않지만 중요한 것은 기존 State와 병합되지 않고 기존 State를 덮어쓴다는 것입니다. 위의 코드와 예시 코드와 함께 살펴보겠습니다. 기존 State는 counter와 showCounter 프로퍼티를 가지고 있었지만 위와 같이 counter 필드 값만 반환되게 수정을 하면 store에 저장된 State에 병합을 하는 것이 아니라 덮어쓰기 때문에 저장된 State에서는 더 counter 필드만 남아있게 되고 showCounter는 un.. Redux React에 적용하기 앞서 게시한 Redux 정리를 기반으로 React에 적용하는 방법을 정리하도록 하겠습니다. Redux 정리 Redux 란? Redux는 Cross-Component-State 또는 앱 와이드 상태를 위한 상태 관리 시스템으로 애플리케이션을 변경하며 브라우저에 표시하는 데이터를 다수의 컴포넌트나 심지어는 앱 전체에서 관리하도 nicehyun12.tistory.com Redux React에 적용 초반 Redux 설정은 앞서 게시한 Redux 정리(NodeJS)한 절차와 거의 동일함으로 간략한 코드 예시만 첨부하도록 하겠습니다. npm i redux npm i react-redux 작업 전 Redux 라이브러리와 React와 Redux를 간편하게 연결해주는 라이브러리를 설치해줍니다. 우선 Redux 로직을 별.. 이전 1 2 3 4 5 다음
