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.jsx export const ChildComponent =()=>{ const ..

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

기본적인 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} c:{c} d:{d} ) } Zustand를 사용할 때 store의 여러 state를 ..