반응형 리액트10 [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] 제어(Controlled) 컴포넌트와 비제어(Uncontrolled) 컴포넌트의 차이 React에서 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 데이터 흐름과 상태 관리 방식의 차이에 따라 구분됩니다. 1. 제어 컴포넌트(Controlled Component) - 제어 컴포넌트는 React의 상태(state)를 사용하여 데이터를 관리합니다. - 컴포넌트의 상태(state)를 업데이트하고, 이를 컴포넌트의 속성(props)로 전달하여 UI를 제어합니다. - 사용자 입력에 대한 이벤트 핸들러를 통해 상태(state)를 업데이트하고, 업데이트된 상태를 UI에 반영합니다. - 예를 들어, `` 요소의 값을 상태(state)로 관리하고, `onChange` 이벤트 핸들러를 통해 상태(state)를 업데이트하여 사용자 입력에 따.. 2024. 2. 16. [React] useMemo, useCallback, useRef 1. useMemo - 의존성 배열에 들어있는 변수가 변했을경우에만 새로 create함수를 호출하여 새로운 결과값 반환 - 렌더링이 일어나는 동안 실행 // useMemo 사용법 const memoizedValue = useMemo( () => { //연산량이 높은 작업을 수행하여 결과를 반환 return computeExpensiveValue(의존성 변수1, 의존성 변수2); }, [의존성 변수1, 의존성 변수2] ); - 의존성 배열을 넣지 않을 경우, 매 렌더링마다 함수가 실행 됨 => 무의미 const memoizedValue = useMemo( () => computeExpensiveValue(a,b) ); - 의존성 배열이 빈 배열일 경우, 컴포넌트 마운트 시에만 호출 됨 => 마운트 시점에만.. 2024. 2. 2. 이전 1 2 다음 반응형
