이 글을 쓰게 된 배경은zustand의 z자도 모르고 썼던게 분명한 내가 잘못 사용해왔던 코드에 대한 깨달음과 부끄러움을 담은 글이다.(위 글은 Zustand의 최신 버전인 v5로 작성되었다)여러 상태를 사용할 때 하지말아야 할 것Not To Do: 구조 분해 할당으로 가져오기import { create } from 'zustand'const useEqpStore = create((set) => ({ type: 'printer', state: 'idle', process: 'none', subprocess: 'none', updateType: (newType) => set({ type: newType }), updateState: (newState) => set({ state: newState..
React에서 폼 처리는 사용자 입력을 관리하고 상호작용하는 중요한 부분이다.폼 처리의 접근 방식에는 제어 컴포넌트와 비제어 컴포넌트가 있는데 오늘은 이 둘의 차이를 알아보려한다.제어 컴포넌트 vs 비제어 컴포넌트제어 컴포넌트 (Controlled Components)제어 컴포넌트는 React의 useState를 통해 폼 데이터를 관리한다.각 폼 요소의 값은 컴포넌트의 state에 저장되고, 변경 이벤트를 통해 업데이트된다.특징상태 관리: React의 state로 폼 데이터를 관리한다.실시간 유효성 검사: 입력값이 변경될 때마다 즉시 검증할 수 있다.조건부 렌더링: 입력값에 따라 UI를 동적으로 변경할 수 있다.중앙화된 데이터 흐름: 단일 소스의 진실(Single Source of Truth)를 유지한다..
위 글은 50 React.js Super Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,이 글은 5번째 중 5번째(마지막) 글이다.41. Static Site Generation (SSG) with Next.js (Next.js를 사용한 정적 사이트 생성)문제: 빌드 시 페이지를 사전 렌더링하여 빠른 로드 시간과 더 나은 SEO를 원합니다.해결책: Next.js를 사용하여 정적 사이트 생성을 구현합니다.// PROBLEM: 페이지를 동적으로 렌더링하여 로드 시간이 길어지고 SEO가 좋지 않음const Home = ({ data }) => ( Dynamic Data {data.title} );export async function getS..
