선호:하다

State Batch Update란? 리액트는 컴포넌트의 렌더링 횟수를 최소화하기 위해서 State Batch Update를 사용한다. 이는 리액트의 이벤트 핸들러를 사용하여 여러 번의 setState를 호출할 때 이를 하나의 업데이트로 일괄 처리하여 리렌더링이 한 번만 발생하도록 하는 것이다. ※ 특징 state값의 업데이트는 16ms 단위로 이루어진다. 16ms 내 변경된 state값은 한 번에 업데이트된다. import { useState, useEffect } from "react"; export default function App() { const [num, setNum] = useState(0); const handlePlus = () => { setNum(num + 1); setNum(nu..

Redux-Toolkit redux-toolkit이란 redux로 작성하는 코드를 더 효율적이고 간단하게 작성할 수 있게 해주는 툴킷이며 다음과 같은 기존 redux의 단점을 보완할 수 있다. 많은 설정 - 유용한 작업을 수행하기 위해서는 다수의 라이브러리, 미들웨어 설정 필요 반복되는 코드 불변성 유지의 어려움 기본적으로 redux-toolkit을 사용하게되면 createSlice를 통해 기능별로 여러개의 slice를 만든 후, configureStore를 통해 하나의 store로 합치는 패턴으로 작업하게 된다. Redux-Toolkit 설치하기 npm i @reduxjs/toolkit react-redux Redux-Toolkit 사용하기 redux-toolkit을 사용하여 간단한 counter를 만..

Redux redux란 자바스크립트의 상태 관리 라이브러리로 클라이언트쪽의 데이터를 중앙 관리하기 위해 사용한다. 상태 관리 라이브러리 중 가장 npm trend가 높고 원리가 간단하다. 하지만 코드량이 상당히 많아질 수 있고, 서버쪽의 데이터를 관리하기 위해서는 react query를 사용하거나 redux-saga 등 비동기처리 미들웨어가 필수적이라는 단점이 있다. Redux의 기본 개념 : 세 가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. 2. State is read-only 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다. 리덕스에서도 액션이라는 객체를 통해서만..

react-beautiful-dnd React로 쉽게 드래그 앤 드롭 리스트를 만들 수 있도록 도와주는 패키지이다. npm i react-beautiful-dnd npm i --save-dev @types/react-beautiful-dnd DragDropContext DragDropContext는 드래그 앤 드롭을 가능하게 하고자 하는 영역을 감싸주는 컨테이너이다. 자식 컴포넌트와 드래그를 끝낸 시점에 불려지는 함수인 onDragEnd라는 prop이 필수로 들어간다. Droppable Droppable은 유저가 어떤 것을 드롭할 수 있는 영역을 의미하며, droppableId라는 prop과 함수 형식의 자식 요소를 필수로 넣어줘야한다. Droppable의 자식 요소에 전달되는 magic이라고 불리는 p..

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중 하나이다. React에서 Font Awesome을 사용하는 방법을 알아보자 패키지 설치 아래 세 가지 패키지를 모두 설치해주어야한다. 첫 번째는 SVG 기반 아이콘 활성화를 위한 패키지이며 두 번째는 무료로 제공되는 Solid, Regular, Brand 3개의 카테고리에 대한 패키지를 설치하겠다는 의미이다. 마지막은 Font Awesome을 리액트 컴포넌트 형태로 사용할 수 있게 해주는 패키지이다. npm i @fortawesome/fontawesome-svg-core npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawe..

Selector recoil에서의 함수 또는 파생된 상태 파생된 상태란 atom의 상태에서 파생된 데이터, 즉 atom의 상태에 의존하는 동적인 데이터를 의미 주어진 atom의 상태에 대해 항상 동일한 값을 반환하는 순수함수 Selector를 사용하는 이유? 최소한의 state만 atom에 저장하고 다른 모든 파생되는 데이터는 selector의 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지할 수 있다. Selector 생성하기 export const hourSelector = selector({ key: "hours", get: ({ get }) => { const minutes = get(minuteState); return minutes / 60; }, set: ({ set }, n..

React Hook Form React Hook Form 이란 폼의 유효성 검사를 쉽고 간단하게 만들 수 있는 리액트 라이브러리이다. 일반적인 폼 생성 방법 import { useState } from "react"; function ToDoList() { const [todo, setTodo] = useState(""); //에러 만들기 const [toDoError, setToDoError] = useState(""); //onChange 이벤트 const onChange = (event: React.FormEvent) => { const { currentTarget: { value }, } = event; setTodo(value); }; //onSubmit 이벤트 const onSubmit = (..

Recoil recoil은 리액트를 위한 전역 상태 관리 라이브러리 중 하나이다. 리액트의 특징 중 하나는 데이터가 단방향으로 흐른다는 점이다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 형태를 띄게 된다. 따라서 모든 컴포넌트에서 쓰여야 하는 상태가 있다면 이 정보를 계속 계속 하위 컴포넌트로 전달해야하는 불편함이 있다. 이를 해결하기 위해 나온 것이 recoil과 같은 상태 관리 라이브러리이다. recoil을 사용하면 위 그림과 같이 전역으로 관리해야하는 상태들을 atom 단위로 만들어놓고 해당 atom을 필요로하는 컴포넌트가 구독하여 사용하는 형식으로 동작한다. Recoil 설치하기 npm i recoil Recoil 준비하기 모든 컴포넌트를 RecoilRoot로 감싸주어야한다. ..

React Query 리액트 쿼리란 데이터 fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 리액트 라이브러리이다. React Query 설치하기 npm i react-query React Query 준비하기 모든 컴포넌트를 QueryClientProvider로 감싸준다. // index.tsx import ReactDOM from 'react-dom/client'; import App from './App'; import { QueryClient, QueryClientProvider } from 'react-query'; const queryClient = new QueryClient(); const root = ReactDOM.createRoot(document.getE..

Why Typescript? 타입스크립트는 자바스크립트에 타입을 부여한 언어로 다음 두 가지 관점에서 자바스크립트 코드를 개선하고 개발 생산성을 높일 수 있다. 에러의 사전 방지 코드 가이드 및 자동 완성 const sum = (a,b) => a+b; 위의 자바스크립트 코드는 a와 b를 입력받아 a + b의 값을 구하는 함수이지만, a와 b에 숫자가 아닌 문자열 등을 넘기더라도 오류를 띄우거나 하지 않고 심지어 존재하지 않는 프로퍼티를 읽더라도 undefined를 주고 넘어가는 등 에러의 사전 방지에 취약한 모습을 보인다. const sum = (a:number, b:number) => a+b; sum(1,2); 위와 같이 :를 이용하여 타입을 정의하는 방식을 Type Annotation이라고 한다. 이..