Per ardua ad astra.

Context API를 이용하여 전역 상태 관리하기들어가며리액트(React.js)에서 Context API를 이용하여 전역 상태 관리하는 방법을 정리해본다.Context API를 이용하면 따로 패키지를 설치하지 않고도 전역 상태를 관리할 수 있다. Context API개념컴포넌트 트리에서 전역 상태를 보다 쉽게 공유할 수 있는 기능을 제공하는 API이 방법을 이용하면, 프롭 드릴링(Props Drilling)을 피할 수 있다. 방법① context 파일 생성하기전역으로 사용할 상태를 정의하는 @Context.js@ 파일을 생성한다. ./src/context.jsimport { createContext, useContext, useState } from 'react';// (1) Context 생성하기co..

함수형 업데이트와 직접 참조 업데이트들어가며리액트(React.js)에서 상태(Status)를 업데이트할 때, 함수형 업데이트 방법과 직접 참조 업데이트 방법의 차이에 대해 정리해본다. 함수형 업데이트(Functional Update)setPosts((prevPosts) => [postData, ...prevPosts])상태 업데이트가 이전 상태를 기반으로 이루어진다.함수형 업데이트를 사용할 경우, 다음과 같은 장점이 있다.장점설명안전성- 리액트의 상태 업데이트는 비동기적으로 이루어지기 때문에, 여러 상태 업데이트가 동시에 발생할 수 있다.- 이때, 함수형 업데이트 형태를 사용하면 최신 상태 값을 보장할 수 있다.- @prevPosts@는 항상 현재 상태의 최신 스냅샷을 제공한다.동시성 처리- 상태 업데이..

리액트에서의 상태 관리 방법리액트(React)에서 상태 관리 방법에 대해 알아보자.리액트에서는 상태 관리를 위해 여러 가지 방법을 사용할 수 있으며, 상황에 따라 적절한 방법을 선택하는 것이 중요하다. 상태 관리 방법1. 지역 상태(Local State)리액트의 useState 훅을 사용하여 컴포넌트 내부에서 상태를 관리할 수 있다.작은 규모의 애플리케이션이나 단일 컴포넌트에서 상태 관리가 필요한 경우 적합하다.import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count..