react9 [React] Context Api Context API는 리액트에서 컴포넌트 트리의 깊은 곳에 있는 컴포넌트에 데이터를 쉽게 전달할 수 있게 해주는 기능입니다. 주로 prop drilling(부모에서 자식으로 데이터를 여러 단계에 걸쳐 전달하는 것)을 피하고, 전역적인 상태를 관리할 때 사용됩니다. Redux 같은 외부 상태 관리 라이브러리 없이도 전역 상태를 관리할 수 있는 내장 도구입니다. 1. Context API의 기본 개념 리액트의 기본 상태 관리는 부모에서 자식으로 props를 통해 데이터가 전달됩니다. 그러나 컴포넌트 계층 구조가 깊어질수록 부모와 자식 간의 데이터를 전달하기 위해 **여러 중간 컴포넌트를 거쳐야 하는 불편함(prop drilling)**이 생깁니다. Context API는 이런 문제를 해결하기 위해 만들어졌.. 2024. 9. 21. [React] 리액트의 렌더링 사이클(useLayoutEffect , useEffect) 리액트의 렌더링 사이클과 useLayoutEffect 및 **useEffect**의 실행 시점은 리액트의 성능 최적화와 관련된 중요한 개념입니다. 이 부분을 이해하면 리액트의 렌더링 흐름을 더 잘 관리하고, 컴포넌트가 언제 업데이트되고, 언제 DOM에 반영되는지 정확히 알 수 있습니다.1. 리액트의 렌더링 사이클 개요 리액트에서 상태(state)나 props가 변경되면, 그에 따라 컴포넌트는 다시 렌더링됩니다. 이때 리액트의 렌더링 사이클은 크게 두 가지 주요 단계를 거칩니다: 1. Render (렌더링 단계): • 이 단계에서는 리액트가 가상 DOM을 생성하고, 새로운 Virtual DOM과 이전 Virtual DOM을 비교하여 변경 사항을 찾는 작업이 수행됩니다. 이 과정에서는 브라우저의 실제 DO.. 2024. 9. 21. [React] VDOM의 원리 리액트의 **Virtual DOM (VDOM)**은 리액트가 성능을 최적화하여 효율적으로 UI를 업데이트하기 위해 사용하는 중요한 개념입니다. VDOM의 동작 원리는 브라우저의 실제 DOM을 직접 조작하는 대신, 메모리 상에서 가상 DOM을 만들어 변경 사항을 미리 계산하고, 최소한의 업데이트만 실제 DOM에 반영하는 방식으로 이루어집니다. VDOM의 동작 원리 VDOM은 UI 업데이트 과정을 세 가지 주요 단계로 나눌 수 있습니다: 1. 상태 변화로 인해 VDOM이 갱신됨 2. 리액트의 Diffing 알고리즘이 이전 VDOM과 새 VDOM을 비교 3. 최소한의 변경 사항만 실제 DOM에 반영 (Reconciliation) 각 단계의 동작을 하나씩 자세히 살펴보겠습니다. 1. 상태 변화로 인해 VDOM.. 2024. 9. 21. [React] 커스텀 훅 만들기 커스텀 훅(Custom Hook) 만들기 **커스텀 훅(Custom Hook)**은 리액트의 기본 훅들을 조합하여 재사용 가능한 상태 로직을 만드는 방식입니다. 커스텀 훅을 사용하면 컴포넌트에서 반복되는 로직을 분리하여 중복을 줄이고, 코드의 재사용성을 높일 수 있습니다. 커스텀 훅은 기본적으로 일반 자바스크립트 함수처럼 동작하며, 이름이 반드시 **use**로 시작해야 합니다. 1. 커스텀 훅의 필요성 리액트에서 여러 컴포넌트가 동일한 상태 관리나 로직을 필요로 할 때, 각 컴포넌트마다 해당 로직을 반복적으로 작성하면 중복된 코드가 발생할 수 있습니다. 이럴 때 커스텀 훅을 사용하면 로직을 추상화하고 재사용할 수 있습니다. 예를 들어, 여러 컴포넌트에서 API 호출이나 이벤트 리스너 설정 같은 로직이 .. 2024. 9. 15. [React] 컴포넌트 라이프사이클 리액트에서 컴포넌트의 라이프사이클은 컴포넌트가 생성되고, 업데이트되며, 마지막으로 소멸하는 일련의 과정을 말합니다. 이 과정에서 리액트는 특정 시점마다 개발자가 작업을 수행할 수 있는 **후크(hooks)**를 제공합니다. 라이프사이클은 컴포넌트가 DOM에 렌더링되고 난 후부터, 상태나 props의 변경으로 인해 다시 렌더링될 때, 컴포넌트가 제거될 때까지의 일련의 단계를 포함합니다. 1. 컴포넌트의 라이프사이클 단계 리액트 컴포넌트는 크게 세 가지 주요 단계로 나눌 수 있습니다: 1. 마운트(Mount): 컴포넌트가 생성되어 DOM에 추가되는 시점. 2. 업데이트(Update): 컴포넌트의 상태나 props가 변경되어 다시 렌더링되는 시점. 3. 언마운트(Unmount): 컴포넌트가 DOM에서 제거되.. 2024. 9. 13. [React] 컴포넌트 개념과 역할 컴포넌트는 리액트의 핵심 개념으로, UI를 재사용 가능한 작은 단위로 나누어 관리하는 요소입니다. 리액트 애플리케이션에서 컴포넌트는 사용자 인터페이스의 구성 요소를 정의하고, 여러 컴포넌트를 조합해 복잡한 UI를 구성할 수 있습니다. 컴포넌트의 기본 개념 컴포넌트는 각각 독립적이며, 리액트에서는 크게 두 가지 유형의 컴포넌트를 사용할 수 있습니다: 1. 함수형 컴포넌트 (Functional Component) • 리액트의 함수형 컴포넌트는 자바스크립트 함수를 통해 정의됩니다. • 컴포넌트는 props라는 매개변수를 받아 UI를 렌더링합니다. • 리액트 훅(Hooks)을 사용하여 상태(state)와 생명주기 관련 기능을 구현할 수 있습니다.예시 (함수형 컴포넌트):function Welcome(props.. 2024. 9. 12. 이전 1 2 다음