react

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} ..