전체 글

React.memo, useMemo, useCallback의 차이와 렌더링 최적화 방법앞선 글에서는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법과 콜백 함수를 props로 전달하는 구조, 그리고 useCallback()을 이용해 함수 참조를 유지하는 방법을 살펴보았다.이번에는 React에서 자주 사용되는 최적화 도구인 React.memo, useMemo, useCallback 의 차이를 알아보자.세 기능은 모두 불필요한 연산이나 렌더링을 줄이기 위해 사용되지만, 저장하는 대상과 적용 위치가 서로 다르다. 이 차이를 정확하게 이해하지 못하면 모든 컴포넌트와 함수에 메모이제이션을 적용하여 오히려 코드가 복잡해질 수 있다.React의 재렌더링은 언제 발생할까?React 컴포넌트는 일반적으로 다음과 ..

React Part 3. 애플리케이션 상태와 컴포넌트 상태의 차이React 애플리케이션은 수많은 컴포넌트가 서로 협력하여 하나의 화면을 구성한다. 각각의 컴포넌트는 자신만의 데이터를 관리할 수도 있고, 여러 컴포넌트가 함께 사용하는 공통 데이터를 공유할 수도 있다. 이러한 데이터는 크게 컴포넌트 상태(Component State)와 애플리케이션 상태(Application State)로 구분된다.두 상태의 차이를 이해하면 언제 State를 컴포넌트 내부에서 관리해야 하는지, 언제 상위 컴포넌트나 전역 상태 관리 라이브러리를 이용해야 하는지를 판단할 수 있다.컴포넌트 상태(Component State)란?컴포넌트 상태는 하나의 컴포넌트만 사용하는 데이터를 의미한다.즉, 해당 컴포넌트 내부에서 생성되고 변경되..

React Part 2. 함수 컴포넌트의 장점과 컴포넌트 상태(State)의 이해React는 컴포넌트(Component)를 중심으로 화면을 구성하는 라이브러리이다. 최근 React에서는 클래스 컴포넌트보다 함수 컴포넌트(Function Component)를 기본 개발 방식으로 권장하고 있으며, 대부분의 최신 프로젝트 역시 함수 컴포넌트와 Hooks를 중심으로 개발되고 있다. 함수 컴포넌트는 코드가 간결할 뿐만 아니라 테스트와 유지보수가 쉽고, Babel 컴파일 및 번들 최적화 측면에서도 여러 장점을 제공한다. 또한 React 애플리케이션에서 중요한 개념인 State(상태) 역시 함수 컴포넌트를 중심으로 관리하는 것이 일반적이다.이번 글에서는 함수 컴포넌트의 주요 장점과 컴포넌트 상태(State)에 대해 ..

React Part 1. Create React App와 컴포넌트의 이해React는 사용자 인터페이스(UI)를 효율적으로 개발하기 위해 가장 많이 사용되는 JavaScript 라이브러리 중 하나이다. React 프로젝트를 시작할 때 가장 많이 사용되는 도구 중 하나가 Create React App(CRA)이다. CRA는 React 개발에 필요한 복잡한 환경 설정을 자동으로 구성해 주며, 개발자는 별도의 Webpack이나 Babel 설정 없이 바로 애플리케이션 개발을 시작할 수 있다. 또한 React의 핵심 개념인 컴포넌트(Component)를 기반으로 화면을 구성하기 때문에 코드의 재사용성과 유지보수성이 매우 뛰어나다.이번 글에서는 Create React App의 장점과 React 컴포넌트의 종류, 그리..