FrontEnd/React (29) 썸네일형 리스트형 [React] 리덕스 미들웨어 이해하기 리덕스 미들웨어란 리듀서 함수 몸통에서는 부작용(side effect)을 일으키는 코드를 사용할 수 없다. 그렇기 때문에 리덕스 미들웨어는 리듀서 앞 단에서 부작용이 있는 코드(순수함수X)들을 실행해 얻은 결과를 리듀서 쪽으로 넘겨주는 역할을 한다. dispatch(액션) → 미들웨어 → 리듀서 → 리덕스 저장소 리덕스 미들웨어는 2차 고차함수이다.import {Action, Dispatch} from 'redux'// {dispatch: Dispatch, getState} 구조분해로 object값을 얻어와 분해한다.// const obj = { dispatch: () => console.log("dispatch"), getState: () => console.log("getState") };/.. [React] 리듀서 활용하기 리듀서 합치기 redux 패키지에서 제공하는 combineReducers() 함수는 여러 리듀서를 통합하여 새로운 리듀서를 만들어 준다. 아래 코드는 combineReducers() 함수의 선언문이며 ReducersMapObject 타입 객체를 입력 매개변수로 받는다. 그리고 타입 변수 S는 상태를 의미하며 여기서는 AppState가 해당된다. combineReducers() 함수의 매개변수 reducers는 ReducermapObject타입 객체이다.export function combineReducers (reducers: ReducersMapObject): Reducer> ReducersMapObject 선언문은 상태 객체의 각 키를 처리하는 리듀서의 타입을 매핑하는 역할을 한다. 그러므.. [React] 리덕스 기본 개념 이해하기 리덕스와 리덕스 관련 필수 패키지 리액트 제작사인 메타(meta)는 리액트를 처음 발표할 때 플럭스(flux)라고 부르는 앱설게 구격을 함께 발표했다. 플럭스는 앱의 수준 상태, 즉 여러 컴포넌트가 공유하는 상태를 리액트 방식으로 구현하는 방법이다. 이후 플럭스 설계 규격을 준수하는 오픈소스 라이브러리인 리덕스(redux)가 등장했으며 가장 많이 사용하는 패키지이다. 리덕스를 사용하려면 redux와 @reduxjs/toolkit(RTK)패키지, react-redux 패키지를 설치해야 한다. redux와 RTK는 프레임워크와 무관하므로 리액트 외 앵귤러나 뷰에서도 사용할 수 있다. 다만 react-redux는 리액트와 함께 동작하므로 다른 프레임워크에서는 사용할 수 없다.npm i redux .. [React] useContext 훅 이해하기 컨텍스트란? 컨텍스트를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.리액트 컴포넌트의 데이터는 위에서 아래로(즉, 부모로부터 자식에게) props를 통해 전달하지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다. context를 이용 시 트리 단계마다 명시적으로 props를 념겨주지 않아도 많은 컴포넌트가 값을 공유할 수 있으며 createContext와 useContext 훅으로 이뤄진다. 컨텍스트 기능을 사용하는 리액트와 리액트 네이티브 코드는 항상 이름에 'Provider'가 있는 컴포넌트와 'use컨텍스트_이름()' 형태의 커스텀 훅을 사용한다. 컨텍스트 기능을 구현한 react-.. [React] useRef와 useImperativeHandle 훅 이해하기 ref 속성이란? 모든 리액트 컴포넌트는 reference의 앞 3글자를 따 ref 속성을 제공한다. ref 속성은 초기에는 null 값 이였다가 마운트 되는 시점에 물리DOM객체의 값으로 변경된다. 즉 ref는 물리 DOM 객체의 참조이다. HTML 요소는 자바스크립트에선 DOM 타입 객체이며 , 같은 요소는 HTMLElement 상속타입인 HTMLDivElement, HTMLButtonElement 타입 객체이다. HTMLElement 타입은 click(), blur(), focus() 메서드를 제공하며 리액트 요소가 물리 DOM 상태일때만 호출할 수 있다. ref 속성값은 물리 DOM 상태일 때의 값으로 ref로 얻은 값(DOM 객체)을 사용해 click()과 같은 이벤트를 호출할 수 .. [React] useEffect와 useLayoutEffect훅 이해하기 컴포넌트 생명 주기란? 리액트 프레임워크에서 컴포넌트를 생성하고 렌더링하다 특정 시점에 소멸하는 과정을 컴포넌트의 생명주기(lifecycle)이라고 한다. 컴포넌트의 생명주기는 클래스 컴포넌트가 더 직관적이므로 클래스 컴포넌트로 생명주기에 관해 알아보자. 클래스 컴포넌트에서 상태 구현하기 클래스 컴포넌트 코드를 추가하자. 다만 클래스 컴포넌트에서 사용하는 상태는 state라는 이름의 멤버 속성으로 구현해야 하는 제약조건이 있다.import {Component} from 'react'import {Title} from '../components'export default class ClassLifecycle extends Component { // 클래스 컴포넌트에서는 상태를 state라는 이름의 멤.. [React] useState 훅 이해하기 가변 상태를 캐시하는 useState 훅 useMemo 훅은 불변 상태를 캐시하지만, useState 훅은 가변 상태를 캐시한다. 리액트 프레임워크는 세터 함수가 호출되면 컴포넌트의 상태 변화가 있는 것으로 판단하고 즉시 해당 컴포넌트를 다시 렌더링한다. 다만 상태에는 타입이 존재한다. number, boolean, string 같은 원시 타입(primitive), 객체, 배열, 튜플 타입일 수도 있다.useState의 선언문을 보면 ''는 상태의 타입을 나타낸다. S = string, S = number, S= { key : value} 등으로 타입이 결정된다. 이 제네릭 타입 덕분에 useState는 다양한 타입의 상태 관리를 할 수 있다. 매개변수의 initialState는 상태의 초기.. [React] useMemo와 useCallback 훅 이해하기 리액트 훅의 기본 원리 리액트 훅 함수를 이해하려면 유효 범위(scope)에 대해서 알아야 한다. 리액트 함수 컴포넌트를 기준으로 볼때 컴포넌트 는 함수이기 때문에 중괄호 { } 안쪽의 범위를 블록범위라고 하며 블록범위 안쪽의 변수를 지역 변수라고한다. 아래와 같이 local변수는 지역변수라고 할 수 있으며 return을 통해 함수를 벗어날 경우 local 변수는 소멸한다.export default function UseOrCreate() { const local = 1 return {local}} 상태와 캐시 프로그래밍에서 상태(state)란 변수의 유효 범위와 무관하게 계속 유지(preserve)하는 값을 의미한다. 상태의 종류는 한번 설정 후 변경이 불가능한 '읽기전용(rea.. 이전 1 2 3 4 다음
