거니의 velog

* 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. * 리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적이다. 물론 리덕스를 사용하는 것이 유일한 해결책은 아니다. 이전에 배운 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를 사용한 전역 상태 관리 흐름 이해하기 * 프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리해야 할 떄는 어떻게 해야 할까? 리액트 애플리케이션은 컴포넌트 간..