본문 바로가기

React

 (36)
[React] Redux #3 | 리덕스 사용 준비 리덕스 라이브러리 설치 yarn add redux redux 를 불러와서 redux에 내장된 API를 사용해보고 연습해보자! exercise.js import { createStore } from 'redux'; // createStore 는 스토어를 만들어주는 함수 // 리액트 프로젝트에서는 단 하나의 스토어를 만든다. // 리덕스에서 관리할 상태 정의 const initialState = { counter: 0, text: '', list: [] }; // 액션 타입 정의 // 액션 타입은 주로 대문자! const INCREASE = 'INCREASE'; const DECREASE = 'DECREASE'; const CHANGE_TEXT = 'CHANGE_TEXT'; const ADD_TO_LIST ..
[React] Redux #2 | 리덕스의 3가지 규칙 1️⃣ 하나의 애플리케이션 안에는 하나의 스토어 키워드 포스팅에서 작성했듯 하나의 애플리케이션 안에는 하나의 스토어가 있어야한다. 여러개가 가능하지만, 권장 X 특정 업데이트가 너무 빈번, 애플리케이션의 특정 부분을 완전히 분리시킬 때 여러개! 개발도구를 사용하지 못하게 됨.. 2️⃣ 상태는 읽기 전용 (불변성 유지) 기존의 상태는 건들이지 않고 새로운 상태를 생성하여 업데이트 해주는 방식! 개발자 도구를 통해서 뒤로 돌리고 혹은 다시 앞으로 돌릴 수 있다. shallow equality 검사 : 내부적으로 데이터가 변경되는 것을 감지하는 검사 방식 곧, immutable.js 혹은 immer.js를 사용하여 불변성을 유지하며 상태를 관리하는 방법에 대해 배우게 될 것! 3️⃣ 변화를 일으키는 함수, 리..
[React] Redux #1 | 주요 키워드 Redux의 주요키워드는 대부분 useReducer을 사용할 때 접해본 개념들이다! 1️⃣ 액션 (Action) 상태에 어떤 변화가 필요할 때, 액션을 발생! 하나의 객체로 표현 { type: 'TOGGLE_VALUE" }​ type 필드가 필수적, 그 외의 값들은 개발자 마음! 2️⃣ 액션 생성 함수 (Action Creator) 액션을 만드는 함수 단순히 파라미터를 받아와서 액션 객체 형태로 만듦. export function addTodo(data){// data를 파라미터로 받아옴. return {// 액션 객체 형태로 만듦 type: 'ADD_TODO', data }; } //화살표 함수로도 만듦! (파라미터로 받아오는 대신!) export const changeInput = text => ({..
[React] 리덕스 시작! 이번 카테고리도 마찬가지로 벨로퍼트님의 블로그 자료를 보고 공부한 내용을 바탕으로 합니다. Redux? 리액트에서 가장 많이 사용되는 상태 관리 라이브러리 중 하나 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능! Redux vs Context API 1️⃣ Middleware 리덕스에는 미들웨어라는 개념이 존재 리덕스로 상태관리를 할 때, 우리가 useReducer을 사용해볼 때 접했던 개념인 리듀서 함수를 사용 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행할 수 있다. 특정 조건에 따라 액션 무시 액션을 콘솔에 출력 or 서버쪽에 로깅 액션이 디스패치 됐을 때, 서버 쪽에 로깅 특정 액션이 발생했을 때, 이에 기반하여 ..
[React] API 연동 공부 마무리 이 카테고리에서는 컴포넌트 내부에 Hooks를 사용해보고, Context와 함께 사용해보고, 마지막에서는 재사용 및 간결성을 위한 유틸함수 몇가지를 만들어서 코드를 간결하게 만들어줬다! 지금까지 배운 API 연동 방법으로는 API를 연동해서 개발을 하게될때 큰어려움은 없다고 하나,, Redux 등의 상태 관리 라이브버리를 함께 사용하기도 한다! 해당 상태 관리 라이브러리를 사용했을때의 이점은 좀 더 체계적으로 비동기 관련 액션을 처리할 수 있고 여러 미들웨어 라이브러리를 사용하여 복잡한 비동기 작업을 좀 더 편하게 처리해줄수 있다고 한다. 또한, 서버 사이드 렌더링을 구현하게 될 때, 서버에서 들고 있는 데이터를 쉽게 보존하여 그대로 브라우저에게 전달해주는 과정이 훨씬 쉬워지기도 한다고 한다! 서버 사이..

티스토리툴바