개발 창고

[React] vite와 함께 리액트 컴포넌트 npm에 배포하기

우리가 흔히 사용하는 react, eslint와 같은 패키지를 우리도 npm에 직접 배포할 수 있습니다. react 함수와 컴포넌트 등을 작성한 라이브러리를 추후 프로젝트에 만들어서 사용할 예정이기 때문에, 이를 연습하기 위해 여러 리액트 컴포넌트를 npm에 배포한 과정을 설명하겠습니다. 추가적으로, 개발자 경험과 번들링 사이즈 개선을 위해 여기에 이점이 있는 pnpm과 vite를 사용해서 배포해보겠습니다. vite + pnpm으로 프로젝트 설정하기 pnpm create vite (프로젝트 명) 위 명령어를 실행하면 아래와같이 framework와 언어를 선택할 수 있습니다. react 컴포넌트를 배포하기 위해 React를 선택한 다음, typescript를 지원하기 위해 Typescript를 선택해줍니다..

[React] 메모이제이션 Hook으로 중복연산 피하기 (useCallback, useMemo)

메모이제이션(Memoization)은 프로그램이 동일한 계산을 반복할 때, 이전에 계산한 값을 메모리에 저장함으로써 중복되는 연산을 제거해서 프로그램 실행 속도를 빠르게하는 기술입니다. 리액트 함수형 컴포넌트에서는 이러한 메모이제이션을 돕기 위한 두가지 Hook을 제공합니다. 메모이제이션을 하지 않을 때 함수형 컴포넌트에서 상태값이 변경되면 해당 컴포넌트는 다시 렌더링합니다. 이때 컴포넌트 내부에 정의한 함수들도 다시 생성되고 실행되기 때문에 메모이제이션이 필요합니다. 아래와 같은 경우 메모이제이션 훅 useCallback과 useMemo를 사용할 수 있습니다. 렌더링 마다 함수가 새로 생성되어 참조값이 변하는 경우 실행되는 함수가 복잡한 연산을 수행하는 경우 이외에도 훅을 사용하는 다양한 경우가 있지만..

[React] 리액트의 생명주기 메서드와 Hook

리액트 컴포넌트는 기본적으로 브라우저 상에서 나타되고, 업데이트되며, 사라지는 과정을 거치게 됩니다. 이러한 과정을 생명주기라 하며, 리액트의 모든 컴포넌트에는 생명주기가 존재합니다. 생명주기 내에서는 여러 메서드가 호출되며 이를 사용할 수 있는데 클래스형 컴포넌트에서는 생명주기 메서드를 사용하고, 함수형 컴포넌트에서는 Hook을 사용할 수 있는 점에서 서로 차이가 있습니다. 우선 리액트의 클래스형 컴포넌트의 생명주기 메서드를 알아본 다음, 함수형 컴포넌트의 Hook중 하나인 useEffect 함수를 통해 차이점을 더 자세히 알아보겠습니다. 메서드란? : 클래스 내부에서 정의한 함수를 메서드라 부릅니다. 생명주기 메서드 클래스형 컴포넌트를 작성할 때는 아래와 같이 render() 메서드를 호출하고 JSX..

[React] recoil로 주문내역 관리하기

학교 수업의 팀 프로젝트인 음식 주문 서비스를 구현하는 과정에서 음식 주문 내역을 추가하거나 수정, 삭제하는 기능을 구현하는 과정을 정리하였다. recoil을 사용하는 이유는 여러 컴포넌트에서 주문 정보를 사용해야하기 때문이다. recoil의 중첩객체(nested object)를 함수형 업데이트하기 주문 내역을 추가, 삭제하기 이전에 중첩 객체를 함수형 업데이트하는 방법을 알아보자. 보통 useState안의 배열을 수정하기 위해서 아래와 같은 방법으로 함수형 업데이트를 사용해야한다. setOrderInfo((prev) => ([...prev, newList])); import { atom } from "recoil" export const orderInfoState = atom({ key: "orderI..