eumjo_o

react 18 알파 버전 의 핵심 변경 1️⃣ 자동 배치 (Automatic Batching) 2️⃣ 동시성 (Concurrent) 기능 3️⃣ 서스펜스 (Suspense) 를 지원하는 새로운 서버 사이드 렌더링 아키텍처 1️⃣ 자동 배치 (Automatic Batching) 리액트의 배치란? 더 나은 성능을 위해 상태 업데이트를 해야하는 상태값들을 하나의 그룹으로 묶어서 한 번의 리렌더링(Re-Render)에 업데이트가 모두 진행될 수 있도록 묶는 작업 function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount(c => c + ..

작성된 코드들은 모두 redux-toolkit 을 바탕으로 구현되었습니다. useSelector : 리덕스 스토어의 상태를 조회하는 Hook 참고링크 useSelector는 리덕스 스토어의 상태를 조회 할 때 상태가 바뀌지 않았으면 리렌더링을 하지 않음. const result: any = useSelector(selector: Function, equalityFn?: Function) // PersonContainer.tsx const { name, age } = useSelector((state: RootState) => ({ name: state.person.name, age: state.person.age, })); // CounterContainer.tsx const { count, prevCo..

Scroll, Input, Mousemove와 같이 짧은 시간 동안 반복적으로 이벤트 핸들러가 여러 번 호출되는 것을 방지하는 프로그래밍 기법 자주 사용되는 이벤트나 함수의 실행 빈도수를 줄여서 성능 상의 이점을 얻는다. (이벤트 제어, 제한) Throttle 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도, 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다. → 일정 시간 단위로 이벤트 핸들러가 호출 라이브러리Lodash - https://lodash.com/docs/4.17.15#throttle Underscore - https://underscorejs.org/#throttle 즉, 일정 시간이 경과하기 전에 이벤트가 발생하면 아무것도 하지 않다가 해당 시간이 경과한 이후에 이벤트..