선호:하다

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이라고 한다. 이..

Styled Component Styled Component란 자바스크립트 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 리액트개발에서 주로 사용되는 라이브러리이다. 기존 웹사이트를 개발할 때는 HTML과 CSS, 자바스크립트 파일을 각각 별도의 파일로 두는 것을 관례로 하였지만, React, Vue, Angular 등과 같은 프레임워크, 라이브러리들이 인기를 끌면서 웹 개발의 패러다임이 바뀌게 되었다. 이들은 웹 페이지를 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, 자바스크립트를 종합하는 패턴으로 구성하는 컴포넌트 기반 개발 방법을 주류로 올려놓게 되었다. 따라서 CSS 방식에서도 CSS-module 등을 사용하여 CSS 파일을 외부로 분리하는..

얕은 복사(shallow copy) const obj1 = { a: 1, b: 2}; const obj2 = obj1; console.log( obj1 === obj2 ); // true 위의 코드처럼 객체를 직접 대입하는 경우 두 객체가 같은 주소를 가지게 되는 것을 얕은 복사라고 한다. 두 객체는 같은 주소를 참조하기 때문에 한 객체의 프로퍼티를 변경하면 나머지 객체도 같이 변경된다. 깊은 복사(deep copy) 얕은 복사처럼 주소를 복사해서 공유하는 것이 아니라, 객체의 프로퍼티 값들만 복사하는 것을 깊은 복사라고 한다. 따라서 두 객체는 다른 주소를 갖게되어 한 객체의 프로퍼티를 변경하더라도 나머지 객체의 값은 변하지 않는다. 배열의 복사 방법 - 얕은 복사(depth1인 경우 깊은 복사) sp..

※ 라우팅에 대해 알기전에 SPA에 대한 이해가 먼저 필요하다. [React.js] SPA vs MPA 라우팅(Routing) 라우팅이란 사용자가 요청한 url에 따라 해당 url에 맞는 페이지를 보여주는 것이다. 리액트로 SPA를 개발할 때 라우팅을 위해 react-router 라이브러리를 사용한다. React Router 설치 npm i react-router-dom@6 // @6은 6버전을 설치하겠다는 의미 React Router 컴포넌트 구현 예제 import "./App.css"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import New from "./page..