Recoil 레퍼런스를 토대로 진행했습니다. Recoil A state management library for React. recoiljs.org 리코일 사용해보기 전편에 이어서.. 리코일 사용해보기 - 1 [React/Recoil/typescript] Recoil 레퍼런스를 토대로 진행했습니다. Recoil A state management library for React. recoiljs.org 리코일(Recoil) 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 woongtech.tistory.com 이번에는 간단한 todo 리스트 애플리케이션을 제작할 예정이다. 애플리케이션은 다음 기능을 수행한다. todo 아이템 추가 todo 아이템 수정 tod..
Recoil 레퍼런스를 토대로 진행했습니다. Recoil A state management library for React. recoiljs.org 리코일(Recoil) 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. 그러나 React는 다음과 같은 한계가 있다. 컴포넌트의 상태는 공통된 상위요소까지 끌어올려야만 공유될 수 있으며, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 한다. Context는 단일 값만 저장할 수 있으며, 자체 소비자(consumer)를 가지는 여러 값들의 집합을 담을 수는 없다. 이 두 가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의 말단(state가 사용되는 ..
이전 게시글에 이어서.. 리액트 리덕스 상태관리 - 1 [react/redux/typescript] 리액트에서 리덕스의 사용은 상태 관리를 효율적으로 할 수 있다는 점이다. 리덕스는 상태를 중앙 집중적으로 관리하고 변경 사항을 예측 가능한 방식으로 다룬다. 여러 컴포넌트에서 공유해야 woongtech.tistory.com 컨테이너 컴포넌트 생성 컴포넌트 리덕스 스토어에 접근해 원하는 상태를 받아오고, 또 액션도 디스패치할 것이다. 리덕스 스토어와 연동된 컴포넌트를 컨테이너 컴포넌트라고 부른다. CounterContainer 만들기 src 디렉토리 내에 containers 디렉토리를 생성한 뒤, CounterContainer 컴포넌트를 만들자. import Counter from "../components..
리액트에서 리덕스의 사용은 상태 관리를 효율적으로 할 수 있다는 점이다. 리덕스는 상태를 중앙 집중적으로 관리하고 변경 사항을 예측 가능한 방식으로 다룬다. 여러 컴포넌트에서 공유해야 하는 데이터를 중앙에서 관리하면, 컴포넌트 간의 데이터 흐름이 단순화된다. 데이터를 컴포넌트 트리를 따라 전달하는 대신, 컴포넌트는 필요할 때 데이터를 구독하고 업데이트를 수신한다. 이를 통해 애플리케이션의 전반적인 복잡도를 줄이고 디버깅을 용이하게 만들 수 있다. 또한, 리덕스는 애플리케이션의 상태를 일관된 방식으로 업데이트한다. 상태 변경을 위해 액션(action)을 사용하고, 상태를 변경하는 로직을 순수한 함수인 리듀서(reducer)로 분리한다. 이러한 방식은 애플리케이션에서 발생하는 상태 변화를 예측 가능하게 하고..
리덕스란? 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 이용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 리덕스는 전역 상태 관리를 지원하며, 단방향 데이터 흐름을 따른다. 이는 애플리케이션에서 상태를 변경할 때, 컴포넌트에서 발생한 이벤트가 아닌, 액션(Action)을 발생시켜 상태를 변경한다. 액션은 일종의 객체이며, 해당 객체는 상태를 변경하는 데 필요한 정보를 가지고 있다. 예를 들어, 사용자가 로그인하는 경우, 로그인 액션은 사용자 정보를 가진 객체를 생성한다. 액션을 생성한 후, 이를 리듀서(R..
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..
비동기란? 자바스크립트에서 비동기 작업은 특정 작업을 수행하고 결과를 반환하기 전에 다른 작업을 수행할 수 있는 방법이다. 이를 통해 애플리케이션의 반응성을 높일 수 있다. 예를 들어, 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 Ajax 기법을 사용해 서버의 API를 호출함으로써 데이터를 수신한다. 이렇게 서버의 API를 사용해야할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 이 과정에서 해당 작업을 비동기적으로 처리하게 된다. 만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동안 중지상태가 되어야 하기 때문에 다른 작업을 할 수 없다. 하지만 이를 비동기적으로 처리한다면 웹 ..
