거니의 velog

5. 컨테이터 컴포넌트 만들기 * 이제는 컴포넌트에서 리덕스 스토어에 접근하여 원하는 상태를 받아 오고, 또 액션도 디스패치해 줄 차례이다. 리덕스 스토어와 연동된 컴포넌트를 컨테이너 컴포넌트라고 부른다. (1) CounterContainer 만들기 * src 디렉터리에 containers 디렉터리를 생성하고, 그 안에 CounterContainer 컴포넌트를 만들자. import React from 'react'; import Counter from '../components/Counter'; const CounterContainer = () => { return ; }; export default CounterContainer; * 위 컴포넌트를 리덕스와 연동하려면 react-redux에서 제공하는 ..

3. 리덕스 관련 코드 작성하기 * 이제 프로젝트에 리덕스를 사용해 보자. 리덕스 관련 코드를 준비하자. 리덕스를 사용할 때는 액션 타입, 액션 생성 함수, 리듀서 코드를 작성해야 한다. 이 코드들을 각각 다른 파일에 작성하는 방법도 있고, 기능별로 묶어서 파일 하나에 작성하는 방법도 있다. * 위 그림은 가장 일반적인 구조로 actions, constrains, reducers 라는 세 개의 디렉터리를 만들고 그 안에 기능별로 파일을 하나씩 만드는 방식이다. 코드를 종류에 따라 다른 파일에 작성하여 정리할 수 있어서 편리하지만, 새로운 액션을 만들 때마다 세 종류의 파일을 모두 수정해야 하기 때문에 불편하기도 하다. 이 방식은 리덕스 공식 문서에서도 사용되므로 가장 기본적이라 할 수 있지만, 사람에 따..

* 이번 장에서는 리덕스를 사용하여 리액트 애플리케이션 상태를 관리하는 방법을 알아보자. 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만, 프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워질 수 있다. * 리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 된다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수 있다. * 앞에서 바닐라 자바스크립트 환경에서 리덕스를 사용할 때 스토어의 내장 함수인 store.dispatch와 store.subscribe 함수를 사용..

2. 리액트 없이 쓰는 리덕스 * 리덕스는 리액트에 종속되는 라이브러리가 아니다. 리액트에서 사용하려고 만들어졌지만 실제로 다른 UI 라이브러리/프레임워크와 함께 사용할 수도 있다(예: angular-redux, ember-redux, Vue에서도 사용할 수 있지만, Vue에서는 리덕스와 유사한 vuex를 주로 사용한다). * 리덕스는 바닐라(vanila) 자바스크립트와 함께 사용할 수도 있다. 바닐라 자바스크립트는 라이브러리나 프레임워크 없이 사용하는 순수 자바스크립트 그 자체를 의미한다. * 이번에는 바닐라 자바스크립트 환경에서 리덕스를 사용하여 리덕스의 핵심 기능과 작동 원리를 이해해 보자. (1) Parcel로 프로젝트 만들기 * 프로젝트를 구성하기 위해 Parcel이라는 도구를 사용하겠다. 이 ..

* 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. * 리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적이다. 물론 리덕스를 사용하는 것이 유일한 해결책은 아니다. 이전에 배운 Context API를 통해서도 똑같은 작업을 할 수 있다. 리액트 v16.3이 릴리즈되면서 Context API가 개선되기 전에는 사용 방식이 매우 불편했기 때문에 주로 리덕스를 사용해 전역 상태 관리를 해 왔다. * 단순히 전역 상태 관리만 한다면 Context AP..

4. Consumer 대신 Hook 또는 static contextType 사용하기 * 이번에는 Context에 있는 값을 사용할 때 Consumer 대신 다른 방식을 사용하여 값을 받아 오는 방법을 알아보자. (1) useContext Hook 사용하기 * 리액트에 내장되어 있는 Hooks 중에서 useContext라는 Hook을 사용하면, 함수형 컴포넌트에서 Context를 아주 편하게 사용할 수 있다. ColorBox 컴포넌트의 코드를 다음과 같이 수정해 보자. [ColorBox.js] import React, { useContext } from "react"; import ColorContext from "../contexts/color"; const ColorBox = () => { const ..

3. 동적 Context 사용하기 * 지금까지 배운 내용으로는 고정적인 값만 사용할 수 있다. 이번에는 Context의 값을 업데이트해야 하는 경우 어떻게 해야 하는지 알아보자. (1) Context 파일 수정하기 * Context의 value에는 무조건 상태 값만 있어야 하는 것은 아니다. 함수를 전달해 줄 수도 있다. * 기존에 작성했던 ColorContext의 코드를 다음과 같이 수정해 보자. 이번에 코드를 작성한 후 저장하면 오류가 발생할 텐데, 해당 오류는 나중에 수정할 것이므로 걱정하지 말자. [color.js] import { createContext, useState } from "react"; const ColorContext = createContext({ state: { color: ..

* Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 이를테면 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류가 있다. Context API는 리액트 v.16.3부터 사용하기 쉽게 많이 개선되었다. 이 기능은 리액트 관련 라이브러리에서도 많이 사용되고 있다. 예를 들어 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API를 기반으로 구현되어 있다. * 이번 실습은 다음 흐름으로 진행된다. 1. Context API를 사용한 전역 상태 관리 흐름 이해하기 * 프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리해야 할 떄는 어떻게 해야 할까? 리액트 애플리케이션은 컴포넌트 간..

7. 리액트 라우터 적용하기 * 방금 진행한 뉴스 뷰어 프로젝트에 리액트 라우터를 적용해 보자. 기존에는 카테고리 값을 useState로 관리했는데, 이번에는 이 값을 리액트 라우터와 URL 파라미터를 사용하여 관리해 보자. (1) 리액트 라우터의 설치 및 적용 * 우선 현재 프로젝트에 리액트 라우터를 설치하자. $ yarn add react-router-dom // v5 설치 용도 $ yarn add react-router-dom@5 * 그리고 index.js에서 리액트 라우터를 적용하자. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; impor..

5. 데이터 연동하기 * 이제 NewsList 컴포넌트에서 이전에 연습 삼아 사용했던 API를 호출해 보도록 하자. 컴포넌트가 화면에 보이는 시점에 API를 요청해 볼 것이다. 이때 useEffect를 사용하여 컴포넌트가 맨 처음 렌더링되는 시점에 API를 요청하면 된다. 여기서 주의할 점은 useEffect에 등록하는 함수에 async를 붙이면 안 된다는 것이다. useEffect에서 반환해야 하는 값은 뒷정리 함수이기 때문이다. * 따라서 useEffect 내부에서 async/await 를 사용하고 싶다면, 함수 내부에 async 키워드가 붙은 또 다른 함수를 만들어서 사용해 주어야 한다. * 추가로 loading이라는 상태도 관리하여 API 요청이 대기 중인지 판별할 것이다. 요청이 대기 중일 때는..