🧩배경react 19 에 도입된 `useActionState` hook 학습한뒤 해당 hook을 활용한 예시를 만들어보았다.🧩useActionState 특징`useActionState`는 form action의 결과를 기준으로 state를 업데이트 하는 훅`const [state, formAction, isPending] = useActionState(fn, initialState, permalink?)` 와 같이 사용Canary versions 에서는 `useFromState`로 불림hook이지만 서버컴포넌트에서도 사용 가능하다.  반드시 tag 내부에서 사용해야함 🧩활용예시`useActionState`를 이용하여 위와 같은 화면을 만들어 보았다. 위 화면의 동작 흐름은 아래와 같다.첫 화면 렌..

🧩배경Nextjs를 사용하면서 자연스레 서버컴포넌트를 사용해왔지만 따로 포스팅으로 정리하는 시간을 가지진 않아 각잡고 React 공홈에서 Server Component 파트를 읽고 정리해보는 시간을 가졌다. 🧩React 19 부터 stable react 18v Server Component Part를 보면 Canary 표시가 되어있는데 19v부터는 사라졌고 stable이라고 언급되었다. 🧩소스코드로 비교아래에는 React 19 공식 홈페이지에 올라온 예시코드로 같은 기능을 클라이언트 컴포넌트, 서버 컴포넌트 각각 이용해서 구현했을 때의 소스코드이다. 보면서 느끼겠지만 서버 컴포넌트가 훨씬 코드가 짧고 개인적으로 더 직관적이다. ( 물론 이외에도 여러 장점/단점이 있다. ) 클라이언트 컴포넌트로 구현..

react lazy loading 처리 방법오늘 다루고자 하는 내용은 react lazy loading 처리 방법이다.코드를 먼저 보면서 이해 해 보자  ( 하단 코드는 의도를 전달하기 위한 수도 코드임을 참고 부탁드립니다. )// ParentComponent.jsx import { lazy, suspense } from '... source' import {LoadingUI} from '...source'const ChillComponent = lazy(() => import('./ChildComponent'))const ParentComponent=()=>{ return ( )}// ChildComponent.jsxexport const C..

비즈니스 로직 어떻게 분리할까?!리액트 컴포넌트에서 왜 비즈니스 로직을 분리하는지 그리고 분리를 하면 어떻게 하는지 예시를 통해 알아보려고 한다. 비즈니스 로직은 왜 분리할까!? 비즈니스 로직을 왜 분리할까를 생각해보았다.. 생각하자 마자 떠오른 말은 관심사의 분리였다. 우리는 렌더링되는 ui와 비즈니스 로직(어떤 로직을 통해 ui가 바뀌고 렌더링 되는지)을 분리함으로써 코드의 유지보수 및 가독성이 올라간다! 실제로 여러 글을 참고하니 코드의 유지보수성과 가독성 이야기가 꼭 나와 있었다.  코드를 통해 알아보자const Example = () => { const [count,setCount] =useState(0) const delayCount =() =>{ setTimeout(() => { ..

기본적인 Zustand store 구독 방법import { create } from 'zustand'// store 생성const useStore = create((set) => ({ a:"a", b:"b", c:"c", d:"d",}))const Coponent = ()=>{ // a,b,c,d state 구독 const a = useStore((state)=> state.a) const b =useStore((state)=> state.b) const c =useStore((state)=> state.c) const d =useStore((state)=> state.d) return( a:{a} b:{b} ..

✅useMemo란?useMemo는 재렌더링 사이에 계산결과 값을 캐싱하는 hook이다.useMemo를 사용하면 재 렌더링 시 캐싱된 값을 그대로 사용하므로 불필요한 계산과정을 스킵하여 컴포넌트 렌더링 시간을 단축시킬 수 있다. 그렇다고 무조건 useMemo를 사용해야 되냐? 그것은 아니다. 오히려 대부분의 곳에서 useMemo는 오히려 불필요하고 특정한 상황에서 사용 시 성능상 이점을 가져 갈 수 있다.  ✅useMemo 예시 코드만약 `filterTodos(todos,tab)` 함수가 2초가 걸린다고 가정해보자 그럼 아래와같이 useMemo 없이 코드가 쓰였을때 `TodoList` 컴포넌트가 재랜더링이 될 때마다 `filterTodos(todos, tab)` 가 실행되면서 TodoList 컴포넌트가 렌..