반응형 react15 [React] Flux패턴 (todolist) 오늘은 Flux 패턴에 대해 이야기 해보겠습니다. React Flux란? React Flux는 React 애플리케이션에서 데이터 흐름을 관리하기 위한 아키텍처 패턴입니다. 이 패턴은 단방향 데이터 흐름을 중심으로 구성되어 있으며, 애플리케이션의 상태를 예측 가능하고 유지보수하기 쉽게 만들어줍니다. Flux 아키텍처는 다음과 같은 주요 요소로 구성됩니다: Actions: 애플리케이션에서 발생하는 이벤트 또는 사용자의 상호작용을 나타내는 객체입니다. Actions는 애플리케이션에서 어떤 일이 발생했는지를 명확하게 정의하고, 액션의 타입과 필요한 데이터를 포함합니다. Dispatcher: 액션을 받아서 등록된 콜백 함수에게 액션을 전달하는 역할을 합니다. Dispatcher는 단 하나만 존재하며, 애플리케이션.. 2024. 3. 3. [React] Automatic Batching 1. Automatic Batching React의 자동 배치 기능은 여러 개의 연속적인 업데이트를 단일 배치로 효율적으로 처리하여 성능을 향상시키는 메커니즘 기존방식 Batching => Automatic Batching // 기존 버전 setTimeout(() => { setCount((count) => count + 1); setIsFull((isFull) => !isFull); //각 state의 업데이트 마다 재렌더링 발생 }, 1000); // 현재 버전 setTimeout(() => { setCount((count) => count + 1); setIsFull((isFull) => !isFull); // 재렌더링이 마지막에 한번만 발생 *Automatic Batching }, 1000; 2... 2024. 2. 21. [React] Context Context란? React에서 Context는 컴포넌트 간에 데이터를 공유하기 위한 메커니즘으로 Context를 사용하면 중간에 있는 컴포넌트들을 건너뛰고, 프로퍼티를 하위 컴포넌트로 직접 전달하지 않고도 데이터를 전달할 수 있습니다. Context를 사용하면 상위 컴포넌트에서 데이터를 생성하고, 하위 컴포넌트에서 이 데이터를 사용할 수 있는데, 이를 통해 컴포넌트 트리 전체에서 동일한 데이터에 접근할 수 있게 됩니다. Context를 사용하려면 먼저 React.createContext() 함수를 사용하여 Context 객체를 생성해야하고, Context 객체의 Provider 컴포넌트를 사용하여 데이터를 제공하고, Consumer 컴포넌트를 사용하여 데이터를 소비할 수 있습니다. Provider 컴포.. 2024. 2. 20. [React] Composition, Specialization, Containment Composition이란? React Composition은 React 애플리케이션에서 컴포넌트를 구성하고 조합하는 방법을 의미합니다. 이를 통해 컴포넌트 간의 재사용성과 모듈성을 높일 수 있습니다. React Composition은 두 가지 주요 개념을 포함합니다: 1. 컴포넌트 합성 (Component Composition) 컴포넌트 합성은 작은 단위의 컴포넌트들을 조합하여 더 큰 컴포넌트를 만드는 방법입니다. 이를 통해 컴포넌트들을 재사용하고 필요에 따라 조합하여 유연한 구조를 구현할 수 있습니다. 예를 들어, 버튼 컴포넌트, 입력 필드 컴포넌트, 레이아웃 컴포넌트 등을 조합하여 폼 컴포넌트를 만들 수 있습니다. 2. 컴포넌트 상속 (Component Inheritance) 컴포넌트 상속은 한 컴포.. 2024. 2. 20. [React] Virtual DOM Virtual DOM이란? React에서 Virtual DOM은 실제 DOM과 동기화되는 가상의 DOM 표현입니다. React는 변경된 부분만 실제 DOM에 반영하여 성능을 최적화하는 방식으로 작동합니다. Virtual DOM 작동 원리 컴포넌트의 상태(state)나 속성(props)이 변경되면, React는 Virtual DOM에 해당 컴포넌트의 새로운 가상 표현을 만듭니다. 가상 DOM은 일반 JavaScript 객체로 구성되어 있으며, 컴포넌트의 계층 구조와 속성을 반영합니다. 새로운 가상 DOM과 이전 가상 DOM을 비교하여 변경된 부분을 식별합니다. 이 과정은 효율적인 알고리즘을 사용하여 수행됩니다. 변경된 부분을 찾은 후에는 React는 해당 부분만 실제 DOM에 반영합니다. 이를 위해 DOM.. 2024. 2. 17. [React] 제어(Controlled) 컴포넌트와 비제어(Uncontrolled) 컴포넌트의 차이 React에서 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 데이터 흐름과 상태 관리 방식의 차이에 따라 구분됩니다. 1. 제어 컴포넌트(Controlled Component) - 제어 컴포넌트는 React의 상태(state)를 사용하여 데이터를 관리합니다. - 컴포넌트의 상태(state)를 업데이트하고, 이를 컴포넌트의 속성(props)로 전달하여 UI를 제어합니다. - 사용자 입력에 대한 이벤트 핸들러를 통해 상태(state)를 업데이트하고, 업데이트된 상태를 UI에 반영합니다. - 예를 들어, `` 요소의 값을 상태(state)로 관리하고, `onChange` 이벤트 핸들러를 통해 상태(state)를 업데이트하여 사용자 입력에 따.. 2024. 2. 16. 이전 1 2 3 다음 반응형
