이전 게시글에 이어서.. 리액트 리덕스 상태관리 - 1 [react/redux/typescript] 리액트에서 리덕스의 사용은 상태 관리를 효율적으로 할 수 있다는 점이다. 리덕스는 상태를 중앙 집중적으로 관리하고 변경 사항을 예측 가능한 방식으로 다룬다. 여러 컴포넌트에서 공유해야 woongtech.tistory.com 컨테이너 컴포넌트 생성 컴포넌트 리덕스 스토어에 접근해 원하는 상태를 받아오고, 또 액션도 디스패치할 것이다. 리덕스 스토어와 연동된 컴포넌트를 컨테이너 컴포넌트라고 부른다. CounterContainer 만들기 src 디렉토리 내에 containers 디렉토리를 생성한 뒤, CounterContainer 컴포넌트를 만들자. import Counter from "../components..
리액트에서 리덕스의 사용은 상태 관리를 효율적으로 할 수 있다는 점이다. 리덕스는 상태를 중앙 집중적으로 관리하고 변경 사항을 예측 가능한 방식으로 다룬다. 여러 컴포넌트에서 공유해야 하는 데이터를 중앙에서 관리하면, 컴포넌트 간의 데이터 흐름이 단순화된다. 데이터를 컴포넌트 트리를 따라 전달하는 대신, 컴포넌트는 필요할 때 데이터를 구독하고 업데이트를 수신한다. 이를 통해 애플리케이션의 전반적인 복잡도를 줄이고 디버깅을 용이하게 만들 수 있다. 또한, 리덕스는 애플리케이션의 상태를 일관된 방식으로 업데이트한다. 상태 변경을 위해 액션(action)을 사용하고, 상태를 변경하는 로직을 순수한 함수인 리듀서(reducer)로 분리한다. 이러한 방식은 애플리케이션에서 발생하는 상태 변화를 예측 가능하게 하고..
Context API는 리액트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 리액트 애플리케이션에서 여러 컴포넌트에서 공유해야 할 상태나 함수등의 값을 트리 구조 상에서 상위에서 하위로 props를 전달하지 않고, 직접적으로 하위 컴포넌트에서 접근할 수 있도록 도와준다. Context API는 createContext 라는 함수로 생성한다. createContext 함수는 provider와 consumer를 생성한다. provider는 context를 생성하고, 해당 컴포넌트 내의 모든 하위 컴포넌트에서 해당 context에 접근할 수 있도록 한다. consumer는 context를 사용해 값을 가져오는 함수이다. Context API를 사용하면 props 전달을 줄일 수 있어 코드의 가독성을..
axios로 API 호출하기 axios는 브라우저와 Node.js에서 모두 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리이다. axios의 주요 특징은 다음과 같다. 간결하고 직관적인 API Promise 기반의 비동기 처리 브라우저 및 Node.js에서 모두 사용 가능 요청 및 응답 데이터의 자동 변환 (JSON, XML 등) 프로젝트 생성 및 axios 설정 npx create-react-app news-tutorial --template typescript cd news-tutorial npm install axios // 타입스크립트는 추가로 설정 npm install @types/axios // src/App.tsx import axios from "axios"; impor..
라우팅 라우팅(Routing)이란 웹 애플리케이션에서 사용자가 URL을 통해 페이지에 접근할 때 해당 URL에 따라 서로 다른 컴포넌트를 보여주는 것을 의미한다. 일반적으로, 브라우저에서 URL을 입력하거나 링크를 클릭하면 URL의 경로(path)와 쿼리(query) 부분을 분석하여 해당하는 컴포넌트를 렌더링한다. 이 과정을 라우팅이라고 한다. 라우팅은 SPA(Single Page Application)를 구현하는 데 필수적이며, SPA는 초기 로딩 시 서버에서 모든 컨텐츠를 불러오는 것이 아니라 필요한 데이터만 가져와 화면을 구성하기 때문에, URL에 따라 다른 화면을 보여주는 라우팅이 필요하다. 또한, 브라우저의 뒤로 가기/앞으로 가기 버튼과 같은 브라우저 기능과의 호환성을 유지하기 위해서도 라우팅이..
리액트에서 불변성을 유지하는 것은 상태를 효율적으로 업데이트하고 컴포넌트의 성능을 최적화하기 위해 중요하다. 불변성을 유지하면 상태를 직접 수정하지 않고 복제본을 만들어 변경하기 때문에, 이전 버전과 새 버전의 상태를 비교해 변경된 부분만 업데이트할 수 있다. readonly 타입스크립트에서는 불변성을 유지하는 가장 일반적인 방법으로 'readonly' 키워드를 사용하는 방법이 있다. 예를 들어, 다음과 같이 Person 타입의 객체를 만들어 불변성을 유지할 수 있다. type Person = { readonly name: string; readonly age: number; } 이렇게 하면 Person 객체의 name과 age 프로퍼티는 읽기 전용(readonly)으로 만들어지기 때문에, 객체의 상태를..
지난 글에서 만들었던 일정 관리 웹 애플리케이션을 통해 성능 최적화를 도모해보고자 한다. 많은 데이터 렌더링 일정 관리 애플리케이션 코드에서 랙을 경험할 수 있도록 많은 데이터를 렌더링해보자. import "./App.css"; import TodoTemplate from "./TodoTemplate"; import TodoInsert from "./TodoInsert"; import TodoList from "./TodoList"; import { useCallback, useRef, useState } from "react"; function createBulkTodos() { const array = []; for (let i = 1; i { const todo = { id: nextId.curre..
프로젝트 준비 먼저, 필요한 라이브러리 및 프로젝트 생성부터 시작해본다. npx create-react-app todo-app --template typescript cd todo-app npm install classnames react-icons sass classnames라이브러리는 조건부 스타일링을 조금 더 편리하게 할 수 있도록 만들어주고, react-icons는 리액트에서 다양한 아이콘을 사용할 수 있는 라이브러리이다. 아이콘의 크기나 색상은 props 혹은 CSS 스타일로 변경해서 사용할 수 있다. 그리고, 여백의 공간을 회색으로 변경해주기 위해 index.css를 약간 수정해준다. /* index.css */ body { margin: 0; padding: 0; background: #e0..
