회고

컴포넌트 간 State 공유하기 : 끌어올리기지난 시간, 상위 컴포넌트에서 아래의 컴포넌트의 상태를 관리하기 위한 전략인 끌어올리기에 대해 간략히 설명했다. 이번에는 예시를 통해 상태를 끌어올리는 과정을 확인해보자.Accordion이 두 개의 Panel을 렌더링하는 예시AccordionPanelPanel각 Panel 컴포넌트는 콘텐츠 표시 여부를 결정하는 Boolean형 isActive 상태를 각각 가지고 있다.import { useState } from 'react';function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? (..

pnpm이란?pnpm(Performant Node Package Manager)는 주요 JavaScript 패키지 관리자 중 하나로, 2016년 Zoltan Kochan에 의해 Node.js JavaScript 런타임 환경을 위해 개발되었다.왜 pnpm을 사용해야 하는가?1. 디스크 공간 절약npm을 사용할 때 종속성을 사용하는 프로젝트가 100개 있는 경우 해당 종속성의 사본 100개가 디스크에 저장된다. 그러나, pnpm을 사용하면 의존성이 content-addressable 저장소에 저장되므로, 다음 단계가 진행된다.다른 버전의 의존성(dependencies)을 사용할 때, 다른 부분만이 저장소에 추가된다. 만약 100개의 파일이 있고, 새로운 버전이 해당 100개 파일 중에 한 파일의 변화만을 가..

상태컴포넌트는 컴포넌트 안에서만 접근 가능한 로컬 데이터인 "상태(state)"를 가질 수 있다. 이 데이터를 다른 컴포넌트와 공유하려면 React의 단방향 데이터 흐름에 따라 두 컴포넌트 보다 상위 위치에 자리 잡은 컴포넌트로부터 속성(props)으로 전달받아야 한다. 상태 관리 전략 : 끌어올리기React 컴포넌트 로컬 데이터인 상태를 관리하는데 사용되는 가장 주요한 전략 중 하나는 상태를 끌어 올리거나 끌어 내리는 것이다. 우선은 끌어올리기에 대해 알아보자.  상태 끌어 올리기(↑) 전략 A와 C는 상태를 관리 중이고, A는 B컴포넌트와 연관된 상태 관리 중. 만약 B가 C에서 관리 중인 State에 접근할 수 있어야 하고, C의 상태가 변경될 때마다 B에서도 변경된 값을 표시해야한다면, 현재 상황..

이전 글: React 훅(Hook)의 정의와 특징훅(Hook)이란?함수형 컴포넌트에서 React의 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수훅의 종류React는 여러 가지 기본 훅을 제공한다. 가장 많이 사용되는 훅은 다음과 같다.useState: 상태를 관리useEffect: 부수 효과(Side Effect)를 관리useContext: Context API를 사용하여 전역 상태를 관리useReducer: 복잡한 상태 로직을 관리useState와 useEffect 설명1. useState상태를 선언하고 업데이트할 수 있게 해주는 훅상태가 변경되면 컴포넌트가 리렌더링된다.import React, { useState } from 'react';function Coun..

훅이란? 함수형 컴포넌트에서 React의 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수왜 훅(Hooks)이 필요했나?컴포넌트 내부에 캡슐화 된 로직은 다른 컴포넌트와 공유가 쉽지 않았다. 결국 로직을 재사용하기 위해 React 앱에서 Render Props, HOC와 같은 복잡한 패턴을 사용해야 했다. 1. 함수의 한계: 상태 관리 불가능함수는 순수한 로직을 재사용하기에 적합하지만, 상태를 내부적으로 관리할 수 없다. function Counter() { let count = 0; // 이 변수는 함수가 호출될 때마다 초기화됨 const increment = () => { count += 1; console.log(count); }; return i..