Redux Toolkit? Redux Toolkit은 Redux 팀에서 세 가지 걱정을 해결하기 위해서 등장했다. 1. Redux 스토어 환경 설정이 너무 복잡하다. 2. Redux를 쉽게 사용하기 위해선 추가로 패키지들을 설치해야 한다. 3. Redux는 많은 보일러플레이트 코드를 요구한다. 즉, Redux Toolkit은 Redux로 개발하는 과정을 단순화하여 흔한 실수를 방지할 수 있게 해 준다. ※ 보일러플레이트 코드? 최소한의 변경으로 여러 곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다. Redux Toolkit 사용법 Redux Toolkit API는 크게 7가지가 있다. 1. configureStore Redux의 createStore 함수와 유사한 함수이다. Reducer..

Redux는 React에서 가장 많이 사용되고 있는 상태 관리 라이브러리 중 하나이다. 최근에는 Redux Toolkit이 새롭게 생긴 김에 다시 정리해본다. Redux의 주요 개념들 1. Action ( 액션 ) 상태가 변화가 필요할 때, 액션이 발생된다. { type: 'TOGGLE_MODAL', data: { // ... } } 객체로 되어 있으며, type 속성은 반드시 필요하며, 액션을 구분하는 용도로 사용한다. 2. Action Creator ( 액션 생성 함수 ) 액션 객체를 만들어주는 함수이다. export const toggleModal = (data) => { return { type: "TOGGLE_MODAL", data, } } 액션 생성 함수를 만들어서 사용하는 이유는 쉽게 컴포넌..

슈퍼마켓 구현하기 MobX를 깊게 다루기 위해서 슈퍼마켓을 추상적으로 구현하려고 한다. market 스토어 작성 import { observable, action, computed, makeObservable } from "mobx"; export default class MarketStore { selectedItems = []; constructor() { makeObservable({ selectedItems: observable, put: action, take: action, total: computed, }); } put = (name, price) => { const exists = this.selectedItems.find((item) => item.name === name); if (!e..

카운터 만들기 yarn add mobx mobx-react import React, { Component } from "react"; import { observable, action, makeObservable } from "mobx"; import { observer } from "mobx-react"; class Counter extends Component { number = 0; constructor() { super(); makeObservable(this, { number: observable, increase: action, decrease: action, }); } increase = () => { this.number++; }; decrease = () => { this.number--..

MobX는 Redux와 같은 인기있는 React 상태 관리 라이브러리이다. MobX의 주요 개념들 1. Observable State( 관찰 받고 있는 상태 ) MobX를 사용하고 있는 앱의 상태는 Observable하다. 즉, 관찰 받고 있는 상태이다. 앱에서 사용하고 있는 State는 변할 수 있고, 만약 특정 부분이 바뀌면 MobX에서 어떤 부분이 바뀌었는지 알 수 있다. 2. Computed Value ( 연산된 값 ) 연산된 값은 기존 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값이다. 주로 성능 최적화를 위해서 사용된다. 어떤 값을 연산해야 할 때, 연산에 기반이 되는 값이 바뀔때만 새롭게 연산하고, 바뀌지 않으면 기존의 값을 사용할 수 있다. 예를들어, 800원짜리 물병을 4병 살..

1. import React from 'react' JSX 문법을 사용하면 우리는 import React from 'react'를 항상 사용한다. 하지만 실제로 해당 모듈을 우리가 사용한다는 느낌은 들지 않는다. Babel이 JSX 문법을 React.createElement 코드로 변환하기 때문에 우리가 실제로 사용을 하지 않지만 컴파일된 후 코드에는 React가 쓰이고 있다. 그렇기 때문에 우리가 사용한다고는 느끼지 못하지만 Babel을 통해서 React 모듈을 사용하고 있던 것이다.

1. DOM DOM이란 문서 객체 모델(Document Object Model)로 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스다. 여기서 말하는 문서 객체란, html, head, body, footer 같은 태그를 JavaScript에서 이용할 수 있는 객체를 의미한다. 즉, DOM은 HTML과 스크립트언어(JavaScript)를 이어주는 역할을 하고 있다. 2. Virtual DOM이 나온 이유 만약 요소를 수정할 경우 DOM의 document.getElementById를 사용할 경우 아쉬운 점이 있다. 1. 메모리 누수와 속도 요소를 찾는 코드를 변수에 저장하지 않고 매번 document.getElementById를 사용한다면, 각 단계마다 페이지의 모든 document를 훑으며 ..

웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 예를 들어 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 ajax 기법을 사용하여 서버의 API를 호출하여 데이터를 수신한다. 이 경우 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 이 과정에서 해당 작업을 비동기적으로 처리하게 된다. 만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 그리고 요청이 끝나야 비로소 다음 예정된 작업을 할 수 있다. 하지만 비동기적으로 처리하면 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러 가지 요청을 처리할 수도 있고, 기다리는 ..