리액트 컴포넌트 성능 최적화

리액트에서 제공하는 API 중 useMemo, useCallback, memo는 리액트에서 발생하는 렌더링을 최소화 하기 위해 최적화 기법으로 사용됩니다.이 세 가지가 모두 최적화 기법이라는것은 알지만 대부분은 정확히 언제 사용하는지에 대해서는 알아 보도록 하겠습니다.  먼저 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생합니다.전달 받은 props가 변경될 때자신의 state가 변경될 때부모 컴포넌트가 리렌더링될 때 1. React.memo전달 받은 props의 변경이 아닌 다른 상황(2, 3번)으로 인해 리렌더링이 되는 부분을 방지하는 함수를 말합니다.컴포넌트를 만들고 React.memo()로 감싸주면 끝!const Item = ({ data, onClick }: { data: { id: string..

• format_list_bulleted Web
• · 2025. 1. 11.
• textsms

[React] Redux(리덕스) Concept

Redux란? 등장 배경 리덕스가 무엇인지 알아보기 전에 리덕스가 왜 필요할까? 고민해볼필요가 있습니다. 리액트에선 일반적으로 State를 관리 할 때는 props를 통해 부모에서 자식 컴포넌트의 방향(단방향 데이터)으로 데이터 흐름이 일어난다. 💡 State - 상태란 의미는 단순히 정상, 비정상인 상태를 뜻하기 보다는 데이터 의미에 가깝다. 즉, 리액트 컴포넌트의 변경 가능한 데이터(DATA)를 뜻한다. 1. 양방향 흐름 지양 부모와 자식 컴포넌트 모두가 데이터를 직접 변경이 가능하다 간단한 화면에선 단순하게 부모와 자식의 데이터간에 데이터를 직접 호출해서 동기화함으로 좋아 보일수 있다. 하지만 복잡한 프로젝트에 컴포넌트들의 잦은 변경이 존재한다면 데이터 흐름을 예상하기 어렵다는 큰 단점이 존재한다...

• format_list_bulleted Web
• · 2022. 12. 31.
• textsms