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 ..
React
비즈니스 로직 어떻게 분리할까?! 리액트 컴포넌트에서 왜 비즈니스 로직을 분리하는지 그리고 분리를 하면 어떻게 하는지 예시를 통해 알아보려고 한다. 비즈니스 로직은 왜 분리할까!? 비즈니스 로직을 왜 분리할까를 생각해보았다.. 생각하자 마자 떠오른 말은 관심사의 분리였다. 우리는 렌더링되는 ui와 비즈니스 로직(어떤 로직을 통해 ui가 바뀌고 렌더링 되는지)을 분리함으로써 코드의 유지보수 및 가독성이 올라간다! 실제로 여러 글을 참고하니 코드의 유지보수성과 가독성 이야기가 꼭 나와 있었다. 코드를 통해 알아보자 const Example = () => { const [count,setCount] =useState(0) const delayCount =() =>{ setTimeout(() => { setCo..
React useState 호출 시 무조거 렌더링이 된다? 정답은...! 아니다 입니다. 1. state가 원시타입일 경우 (Number, String, boolean, null, undefined ) -> setState 호출 이전의 state값과 새롭게 갱신된 state 값을 비교( 이전값 === 새로운값) 한 뒤 같지 않으면 렌더링이 이뤄지고 아니면 렌더링이 발생하지 않습니다. 2. state가 원시타입이 아니고 참조 타입(object, Symbol) 일 경우 ->위와 같은 방식으로 값 자체를 비교하지 않고 메모리 주소를 비교하여 렌더링이 발생할지 말지를 결정합니다. 실제론 동일한 형태의 객체여도 렌더링이 발생할 수 있다는 말이죠 export const Component =() =>{ const [..
기본적인 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를 ..
useCallback은 렌더링 리소스를 줄이기 위해 사용한다. 리액트 컴포넌트는 렌더링 될 때마다 컴포넌트 내부에 필요한 값들을 정의하는데 값이 변하지 않아재 렌더링할 시 굳이 다시 정의하지 않아도 되는 함수들이 있을 것이다. 그럴 때 useCallback 은 특정 함수를 다시 만들지 않아도 돼 라고 알려주는 역할을 한다고 생각하면 된다. import { useState } from "react" import { useCallback } from "react" const Component = () =>{ const [state, setState] = useState(0) // 하단 함수 렌더링 될 때마다 함수를 정의 함 const testFunction = () =>{ console.log("testFu..
useMemo는 렌더링 리소스를 줄이기 위해 사용한다 리액트 컴포넌트는 렌더링 될 때마다 컴포넌트 내부에 필요한 값들을 정의하는데 값이 변하지 않아 재 렌더링할 시 굳이 다시 정의하지 않아도 되는 변수들이 있을 것이다. 그럴 때 useMemo가 이 값은 다시 정의하지 않아도 돼 라고 알려주는 역할을 한다고 생각하면 된다. const Component = () =>{ const object = { key:'value'} // 렌더링 될 때 마다 이값은 계속 재 정의 된다. const [state, setState] = useState(0) return ( { setState((prev)=>prev+1) // setState 실행 -> 재 렌더링 }}>state:{state} ) } 위 코드에서 setSta..
React에서 부모 컴포넌트가 재렌더링 되면 자식 요소도 다시 렌더링 된다 백문이 불여일견이라는 말이 있지 않나 한번 확인해보자 부모 컴포넌트가 를 자식 컴포넌트로 갖는다 import { Child1, Child2} from "./Child" import { useState } from "react" const Parent = () =>{ const [count, setCount] = useState(0) const upCount =()=>{ setCount((prev)=>prev+1) } const downCount=()=>{ setCount((prev)=>prev-1) } return ( count:{count} +1 -1 ) } export default Parent Child1, Child2 두 ..
배경🎈 우리는 웹에서 버튼을 클릭했지만 응답이 즉각처리 오지 않아 고장난 줄 알고 여러번 클릭한 적이 있을 것이다. 이런 경우 내가 원치는 않지만 어떤 액션이 여러번 실행 될 수 있다! 그리고 그 액션이 예를들어 결재라는가 메시지를 보낸다는가 하는 치명적인 경우일 수 있다는 생각이 들었고 이를 방지하기 위해 해당기능을 구현하고자 한다. 어떤방식?🤔 일단 우리의 척척박사 챗지피티한테 물어봤는데 클릭하는 순간 state를 통해 button을 disabled 상태로 만든 뒤 setTimeout을 통해 1초 뒤에 다시 disabled를 풀라는데 ... 이건 굉장히 단순하고 비효율적인 방식이다. 사실 어떤 클릭을 통한 액션이 실행되기까지 1초 안팍이라고 단정 지을 수 없기 때문이다! 그리고 오히려 1초보다도 훨씬..
왜 Formik library를 사용할까? React에서 많이 쓰는 Form library인 Formik을 학습하려고 한다. 학습하기에 앞서 공식 Formik Hompage에서 왜 Formik library를 사용하는지 알아 보았는데 그 이유는 React에서 form은 매우 장황( 사용하기 덜 직관적인으로 해석하면 되려나 .. )하고 비용( 무겁다고 해석 하면 될듯 ?)이 많이 들기 때문이라고 한다. 즉 Formik LIbrary를 사용하면 react에서 Form을 좀 더 쉽고 정돈된 형태로 사용 할 수 있다고 한다. 더군다나 이 libarary는 매우 가볍다고 나와 있다 ( 아래에 내용이 나와 있다. - 하단 참고 ) https://formik.org/docs/overview Overview | For..
