React

React JSX의 List Rendering에서 key값 설정하기 (.map)

React에서 구조화된 객체를 여럿 가지는 배열을 통해서 List를 그리는 전형적인 패턴이 있다. const data = [{ title: "hi", content: "hello" }, ... { title: "bye", content: "sad" }] 해당 데이터를 React는 다음과 같이 그린다. function App() { return ( {data.map(el => ( {el.title} {el.content} ))} ) } React에 익숙하다면, 위의 코드에서 경고 메세지를 예상할 수 있을 것이다. 바로, key prop을 설정하라는 메세지이다. Warning: Each child in a list should have a unique “key” prop. 이 경고를 없애기 위해서 주로 사용..

Server Component에서 Css-in-JS 라이브러리 사용하기 (feat. panda-css)

next.js의 app router가 stable되면서 app 폴더 내부에 생성된 컴포넌트는 기본적으로 server component로 설정되었다. chakra ui를 사용하던 중에 이 문제를 격하게 실감하게 되었다. RSC를 지원하지 않기 때문에 모든 컴포넌트에 "use clinet"를 사용해야 했고, 이렇게 되면 RSC를 사용하지 못하게 되는 단점이 있었다. 이에 대해서 chakra ui 깃허브 이슈를 살펴보던 중, 서버 컴포넌트를 지원하는 새로운 라이브러리르 만들었다는 제작자의 코멘트를 보았다. 그것이 바로 panda css였다. https://panda-css.com/ Panda CSS - Build modern websites using build time and type-safe CSS-in-..

React Suspense와 React-Query, 그리고 react-error-boundary

React의 Suspense 기능이 추가된 이래로, React-Query와 같은 비동기 상태 처리 라이브러리는 suspense 기능을 지원하게 되었다. 그리고 이번에 카카오페이 기술 블로그의 글을 보았는데, 여기에 더해서 react-error-boundary 라이브러리로 에러처리까지 한 번에 하는 것이 매우매우매우 인상적이었다. 🍓 사실, 에러 처리나 로딩 관련 로직은 필요하면서도 반복적인 코드가 계속 들어가게 만드는 문제가 있기에 이 방법이 더 가치있는 것 같다. 그래서, 이번에 이 세가지 기술들을 직접 사용해보고 기록을 남기기로 하였다. 기본적인 구조는 다음과 같다. import styles from "./page.module.css"; import React, { Suspense } from "re..

useReducer의 장점 알아보기 (vs useState)

useReducer의 존재는 알고있었고, useState를 대체한다는 점 역시 알고있었다. redux의 dispatch나 reducer 개념이 useReducer로부터 비롯되었다는 것도 알았지만- 실제로 무슨 장점이 있기에 useState대신 useReducer를 쓰는가에 대해서 진지하게 생각해본적이 없었다는 것을 알게 되었다. 따라서, 이번 기회에 useReducer의 장점에 대해서 기록해보고자 하였다. 🐥 닉네임과 보유한 캐시를 상태로 가지는 컴포넌트를 가정하고, useState와 useReducer를 비교해보는 예제를 만들었다. 일단, useState를 사용한 예제이다. import { useState } from "react"; export default function App() { const ..

React 빌드 후 정적 파일 서버에 올리기 (404 Error 해결)

CRA 등을 이용하여 열심히 개발한 React 프로젝트를 빌드한 뒤, 이를 서버에 전달하여 정적 호스팅을 할 수 있다. 이 경우 자주 등장하는 문제가 바로 라우팅 된 페이지에서 새로고침을 하거나, root 경로('/') 곧바로 그 페이지에 접근하면 페이지를 찾을 수 없는 문제가 발생하는 것이다. 이는, SPA 환경에서 필연적으로 발생하는 문제로 내부에 라우팅은 JS에 의해 처리되고 실제 html은 맨 처음 한 번만 제공받기에 이런 문제가 발생한다. 대부분의 경우 별도의 설정이 없으면, build 폴더 내부의 index.html이 '/' 경로와 매칭되기에 최초 진입이나 '/' 경로를 시작으로한 라우팅에는 문제가 없다. 그러나 그 이외의 경로, 예를 들면 '/about'에 접근한다고 하였을 때 서버에서는 이..

React에서 상태관리 툴 zustand 사용하기

zustand는 flux 원리를 따르는 가볍고 뛰어난 성능을 보여주면서도 사용하기 쉬운 쉬운 상태관리 툴이다. 🥕 다양한 hooks을 지원하기 때문에, React에 익숙한 사용자라면 더욱 더 쉽게 접근할 수 있다. 🥕 기존의 Context API의 단점인 Provider 내부의 렌더링 최적화 문제를 해결하고, 심지어 zustand는 provider로 감싸주지 않아도 되는 장점을 지닌다. 🥕 기존의 redux보다 더 간편한 설정이 가능하며 recoil보다 활발하게 업데이트와 이슈 활동이 이루어지고 있기 때문에 앞으로가 더 기대되는 라이브러리이다. 간단한 사용법 위에서 말했듯, zustand는 별다른 설정없이 사용할 수 있다. create 함수를 통해서 상태와 상태를 변화시킬 함수를 작성한다. import ..

Next.js App Router 간단하게 사용하기

Next 13.4 버전이 릴리즈되면서 App Router가 stable이 되었다. 그에 따라서, 간단하게 App Router를 사용해보도록 하였다. npx create-next-app@latest 위의 명령어로 프로젝트를 생성하면 프로젝트 이름, 타입스크립트와 ESLint 사용 여부, tailwind CSS의 사용여부, src 디렉토리 사용여부를 물은 뒤 다음과 같이 질문이 나온다. 🧅 Use App Router (recommended)? › No / Yes 여기서 Yes를 선택하여 App Router를 사용할 수 있다. 🍎 next.config.js의 설정에 experimental.appDir 이 true가 된다. App 라우터를 사용하면, pages 폴더 대신 app 폴더가 생긴다. app 폴더 내부..

CSS Modules 사용하기

CSS Module은 클래스 이름의 중복을 방지하고, CSS 파일을 여러 개로 관리할 때 유용한 방법이다. 이를 사용하기 위해서는 프로젝트의 build 시스템이 CSS Modules를 지원해야 한다. 대부분의 bundler(예: webpack)는 CSS Modules를 기본적으로 지원한다. 따라서 먼저 프로젝트에 bundler를 설정하고 구성하자. 사용법은 간단한데, css 파일 이름을 생성할 때 이름.module.css 과 같이 네이밍을 하면 된다. React 환경에서 사용 예제 About.tsx import styles from "./about.module.css"; export default function About() { return ( Phrase ); } about.module.css .Co..