Front-end/React

# useReducer useState 처럼 리액트의 상태관리를 돕는 도구 복잡한 상태변화 로직을 컴포넌트에서 분리 복잡한 코드를 깔끔하게 정리할 수 있어서 유지보수에 좋음 Readucer / Dispatch / Action 으로 이루어져 있다. 예를들어 우리가 은행거래를 할 때를 생각하면 쉽다. 1. 철수가 은행에서 거래를 하기위해 요구(Dispatch)를 한다. 2. 그 요구에는 '만원을 출금해주세요' 라는 내용(action)이 있다. 3. 그리고나서 은행(Reducer)에 전달을 한다. 4. 은행은 내용대로 처리를 한뒤 철수의 은행거래내역(state)에 업데이트를 해준다. reducer : state를 업데이트 하는 역할(은행) dispatch : state 업데이트를 위한 요구 action : 요..

# React.memo 리액트에서 제공하는 고차 컴포넌트(HOC) 고차 컴포넌트? 어떠한 컴포넌트를 인자로 받아서 최적화된 컴포넌트를 반환해주는 함수 최적화된 컴포넌트는 props check를 통해 자신이 받는 props에 변화가 있는지 확인한 후 있다면 렌더링 해주고 없다면 기존에 있던 내용을 재사용 해준다. 오직 props 변화에만 의존하는 최적화 방법 React.memo가 필요할 때? 1. 컴포넌트가 같은 Props로 자주 렌더링 될 때 2. 컴포넌트가 렌더링이 될때마다 복잡한 로직을 처리해야 할 때 # 예제 1 부모 컴포넌트 import React, { useState } from 'react'; import './App.css'; import Child from './Child'; functio..

- 컴포넌트 성능을 최적화 하는 방법 # useCallback 인자로 전달한 콜백함수 그 자체를 Memoization 해주는것 함수가 필요할 때마다 새로 생성하는게 아니라 메모리에서 가져와서 재사용하는 것 렌더링 → component 함수 호출 → 모든 내부 변수 초기화 useCallback 사용 렌더링 → component 함수 호출 → Memoize 된 함수를 재사용 컴포넌트가 처음 렌더링 될때만 함수객체를 초기화 해주고 이후에 렌더링 될 때는 새로운 함수객체를 할당 받는게 아니라 이전에 이미 할당받은 함수객체를 계속 가지고 있으면서 재사용하는것 useCallback (() => { return value; }, [item]) 첫번째 인자 ☞ Memoization 해 줄 콜백함수 두번째 인자 ☞의존성..

# useMemo Memoization : 동일한 값을 리턴하는 함수를 반복적으로 호출 해야할 때 자주 쓰는 값을 맨 처음 계산을 해둬서 그 값이 필요할 때 마다 다시 계산을 하는게 아니라 저장해둔곳에서 꺼내서 사용하는것 함수형 컴포넌트 렌더링 → component 함수 호출 → 모든 내부 변수 초기화 ☞ 이렇게 되면 무거운 일을 할 때 무의미한 반복이 계속 되서 성능이 떨어질 수 있다. useMemo를 사용하면? 렌더링 → component 함수 호출, Memoization → 렌더링 → component 함수 호출, Memoize 된 값을 재사용 const value = useMemo (() => { return calculate(); }, [item]); 첫번째 인자는 콜백함수 ☞ 우리가 Memoi..

리액트는 component Tree 형태로 되어있다. 전역적인 data를 props로 일일히 전달해준다면 복잡해지고 어려워진다. 이때 리액트는 context API를 제공해주는데 전역적으로 사용하는 data들을 여러 컴포넌트들끼리 쉽게 공유할수있는 방법을 제공해준다. 최상위 컴포넌트에서 제공해주면 필요한 컴포넌트에서만 사용할 수 있다. context를 사용하는이유? 가장 아래있는 컴포넌트에서만 data가 필요한데도 불구하고 필요하지 않는 컴포넌트까지 전달이 된다. 이렇게 되면 컴포넌트들이 받는 props도 많아지고 코드도 복잡해진다. 전달하는 과정에서 잘못된 정보를 전달하거나 중간에 수정하면 문제해결이 어려워진다. props 대신 context를 사용하면 최상위 컴포넌트가 선언하면 필요한 컴포넌트에서 받..

# useEffect useEffect(() => {} ) 어떤 컴포넌트가 Mount(화면에 첫 렌더링) → Update(다시렌더링) → Unmount(화면에서 사라질때) 되었을 때 특정작업을 처리할 코드를 실행시켜주고 싶다면 사용 인자로 콜백함수를 받는다. (콜백함수란 다른함수의 인자로 전달된 함수를 의미) 콜백함수 내부에 우리가 원하는 작업을 처리할 코드를 작성해주면 된다. useEffect는 두가지 형태만 알고 있으면 된다 1. useEffect(() => { 작업.... }); 인자로 하나의 콜백함수만 받는 것 컴포넌트가 렌더링 될때마다 매번 콜백함수가 실행됨 컴포넌트가 맨처음 화면에 렌더링될때 한번, 컴포넌트가 다시 렌더링 될때 한번 실행됨 ​ 2. useEffect(() => { 작업....}..