React9 [React] memo, useCallback 사용해보기 React.memo, useCallback, useMemo 는 리액트 성능 향상을 위해서는 빠지지 않고 등장하는 기능들이다. 이번에는 memo, useCallback를 사용해서 컴포터넌트의 리렌더링 발생을 줄여나가는 방법에 대해서 알아보려고 한다. 예제로 사용 될 컴포넌트는 다음과 같다. 기능은 각 버튼 클릭 시 클릭한 횟수를 보여주는 아주 간단한 기능이다. 그리고 두개의 버튼을 클릭한 횟수 전체를 보여주는 sum 도 제공한다.import "../App.css";import { useState } from "react";const Performance1 = () => { const [sum, setSum] = useState(0); const [count1, setCount1] = useState(0.. 2025. 4. 16. [React] 함수를 상태에 저장하기 🎈 상황리액트의 상태로 함수를 저장해야하는 경우가 생겼다. 여느 상태 저장과 마찬가지로 아래와 같이 코드를 구현하였다. 아래는 버튼을 클릭하면 state이라는 값을 fn 상태에 저장하는 간단한 기능이다.const App = () => { const [fn, setFn] = useState(null); const handleClick = () => { const state = () => { console.log('함수저장'); }; setFn(state); }; return 버튼} 하지만 위의 코드를 실행 후 fn에는 undefined만 저장 되어있고, 함수를 호출하지 않았는데 console이 호출 되는 현상이 발생하였다. 📯 원인 파악문제의 원인은 바로 s.. 2025. 3. 19. [Zustand] Zustand 리렌더링 최근 쉽고 빠르게 저장소를 구축할 때 zustand를 많이 사용하는 듯 하다. 사용하는 방법도 매우 간편하다.const useStore = create((set) => ({ count: 0, num: 1, setNum: () => set({ num: 1 }), increase: () => set((state) => ({ count: state.count + 1 })), decrease: () => set((state) => ({ count: state.count - 1 })) })) 컨텍스트 API나 Redux 등 대부분의 스토어를 사용하게 되면 Provider를 통해서 상태를 관리하고 하위 컴포넌트에게 상태를 전달하는 방식을 사용한다. 하지만 Zustand는 Provider를 사용하지 않는다... 2025. 3. 7. [React] Context API 성능개선 🎈 간단 설명Context API는 리액트 라이브러리에 내장 된 API로, 중첩된 컴포넌트에서 부모 컴포넌트의 상태를 자식 컴포넌트에게 좀 더 쉽고 간편하게 전달하기 위해서 제공된다. Context의 값이 변경되는 경우 동일한 Context를 사용하는 모든 컴포넌트에서 리렌더링 되는 문제가 존재한다. 👓 Context API 성능 개선의 오해구글에서 Context API의 성능 문제 해결로 검색해보면 React.memo 또는 useCallback, useMemo를 사용하면 성능 개선이 된다는 글이 많이 보인다. 그래서 나는 React.memo 또는 useCallback, useMemo 를 사용하면, 위에서 동일한 Context를 사용하는 경우에 대한 문제를 해결할 수 있을 거라고 오해했었다. 다음.. 2025. 2. 15. 리액트 팁 및 클린코드 - 4. 기타 기타커스텀 훅 반환값결론 : 커스텀 훅의 반환값은 배열, 객체 등 원하는 것으로 선택하자. 흔히 처음에 가장 먼저 접하게 되는 훅인 useState 에 의해서 훅의 반환 값은 [값, setter] 로 해야한다는 생각을 가지게 된다. 하지만 훅의 반환값은 해당 훅의 기능에 맞춰서 원하는 형태로 반환해주면 된다. export const usePosition() { const [x, setX] = useState(0); const [y, setY] = useState(0); return { x, y, setX, setY, }} 인라인 스타일 X인라인 스타일은 자제하라. 동적으로 스타일을 주고 싶다면 클래스네임을 활용하라. 삼항연산자로 클래스 네임 설정조건에 따라 클래스네임을 추가할지 제거할지를 정.. 2024. 11. 2. 리액트 팁 및 클린코드 - 3. Props Props와 관련 된 클린코드 상태를 끌어올리는 것을 주의하라결론 : 의미없는 상태 끌어올림은 의미없는 리렌더링을 발생시킨다. 자식 요소만 리렌더링 되어야 하는 경우에도 상태가 끌어올려져서 부모 컴포넌트가 리렌더링 되는 문제가 발생한다.부모에서 다른 자식 컴포넌트를 사용하는 경우 다른 자식 컴포넌트도 리렌더링 되어 성능에 좋지 못하다. 더보기예를 들어 input과 관련 된 상태를 부모로 끌어올리는 경우 사용자가 타이핑 할때마다 해당 상태를 관리하는 컴포넌트는 매번 리렌더링 된다. 그래서 input은 관련된 컴포넌트에 두고 최종 결과만 부모 컴포넌트에 전달해서 사용하는 방법을 사용하는 것이 성능상 좋다. 잘못 된 예아래는 input을 변경할 때마다 부모의 상태를 변경한다. 이로인해 부모가 리렌더링 되면서 .. 2024. 10. 26. 이전 1 2 다음
