본문 바로가기

FE - Tools23

[React] 로딩 컴포넌트를 제공하는 라이브러리 (Spinner, Skeleton 등) 로딩 컴포넌트를 제공하는 라이브러리 basic-loading 로딩 UI 컴포넌트 로딩 컴포넌트를 간단하게 사용할 수 있는 basic-loading이라는 라이브러리가 개발이 완료되어 블로그에도 소개하려 한다🤩 이 라이브러리에서 제공하는 컴포넌트는 총 8가지로, BasicDot, BounceDot, Fade, ProgressBar, Pulse, Skeleton, Spinner, Wave가 있다. React 기반으로 만들어진 라이브러리로, React와 Next.js에서 사용 가능하다. NPM: https://www.npmjs.com/package/basic-loading 문서: https://basic-loading-docs.vercel.app/ 사용법 1. 설치 npm 혹은 yarn을 이용하여 설치를 해준다.. 2024. 1. 11.
[Next.js] Next.js에서 Recoil Root 설정하는 법 Next.js에서 Recoil Root 설정하는 법 Next.js에서 Recoil을 사용하려면 React와는 초기 세팅 방법이 약간 다르기 때문에 Recoil Root를 어떻게 세팅하면 되는지 정리해보려 한다. Next.js에서 Recoil 사용하는 법 1. Provider 생성 // app/RecoilRootProvider.tsx // 컴포넌트 이름은 자유롭게 지정 import { ReactNode } from "react"; import { RecoilRoot } from "recoil"; type Props = { children: ReactNode; }; export default function RecoilRootProvider({ children }: Props) { return {childr.. 2023. 10. 20.
[Zustand] 간단한 상태 관리, React에서 Zustand 사용하는 방법 간단한 상태 관리, React에서 Zustand 사용하는 방법 Redux에서 벗어나 봅시다 Zustand 도입 계기 프로젝트를 개발하다 보면 전역 상태 관리는 거의 필수이다. 컴포넌트에서 컴포넌트로 변수를 넘겨줄 일이 많은데, 그 많은 변수들을 전부 props로 넘겨줄 수는 없기 때문이다. 따라서 전역 상태 관리 라이브러리를 도입할 수 밖에 없고, 그중에서도 가장 대표적인 툴은 아마 Redux일 것이다. 나 또한 Redux를 사용했다. 정확히 말하면 Redux Toolkit을 사용했다. 이미 많은 사람들이 사용하는 툴이고, 그래서 정보도 많고, 공부할 때 참고할 자료도 많았다. 그래서 너무 당연하게도 나에게 상태 관리란 곧 Redux Toolkit이었다. 하지만 점점 문제를 느꼈다. 뭐가 문제나면... .. 2023. 7. 15.
[React] Context API와 useReducer 사용법 알아보기 Context API와 useReducer로 상태관리하기 # Redux 대신 Context API 로그인 기능을 구현하고 나면, 사용자의 정보를 변수에 담아 전역적으로 사용해야 한다. 그래서 Redux를 사용할까 하다가... 이 프로젝트는 전역적으로 관리해야할 정보가 사용자 정보 딱 하나밖에 없는데 Redux까지 사용할 필요가 있을까? 라는 생각이 들었다. 그래서 Redux 대신, React에서 제공하는 Context API를 사용해보기로 했다. 사용 방법은 간단하다. Context를 생성할 컴포넌트를 하나 만들고, creactContext와 useContext를 사용해주면 된다. // AuthContext.tsx import { createContext, useContext, useEffect, use.. 2023. 5. 11.
[Next.js] getServerSideProps와 Head 태그로 검색 엔진 최적화하기 getServerSideProps와 Head 태그로 검색 엔진 최적화하기 검색 엔진에 유리하다는 Next.js를 사용해보자! # getServerSideProps 이용해서 API 데이터 가져오기 우선 코드 가장 하단에 getServerSideProps를 작성해주고 export default function에 { results } 형식으로 데이터를 가져온 뒤, 타입을 지정해주면 된다. // TypeScript 이용 시 타입 지정을 위해 아래 내용을 import 해주기 import { GetServerSideProps, InferGetServerSidePropsType } from "next"; export default function Home({results }: InferGetServerSideProp.. 2023. 4. 16.
[React] 제어 컴포넌트와 비제어 컴포넌트를 적절하게 사용하는 법 제어 컴포넌트와 비제어 컴포넌트 제어 컴포넌트와 비제어 컴포넌트란, React에서 form 태그 엘리먼트를 다루는 방법이다. form 태그 엘리먼트는 자체적으로 데이터를 가진다는 특정이 있다. 이 특성 때문에 form 태그 엘리먼트를 다루는 방법이 두 가지로 나뉜다. form 태그 엘리먼트 중 가장 자주 사용되는 input 태그를 예로 들어 제어 컴포넌트와 비제어 컴포넌트를 설명해보려 한다. React에서는 input의 value 값을 다룰 때 state를 사용하거나 ref를 사용한다. state를 사용하는 것을 제어 컴포넌트, ref를 사용하는 것을 비제어 컴포넌트라고 한다. # 제어 컴포넌트 import React, { useState } from 'react'; export default funct.. 2023. 3. 12.

티스토리툴바