React/React Basic

[React] 파일 경로를 깔끔하게 정리하기

프로젝트의 규모가 커지다보면 가장 먼저 드는 생각이 파일들의 효율적인 정리이다. 정리할 수 있는 유용하지만 간단한 방법을 알아보자. 부모 폴더가 같은 Components import { SignInModalBox } from "./SignPage/SignInModal"; import { SignUpModalBox } from "./SignPage/SignUpModal"; import { useTable } from "./Hooks/useTable"; import { useConfiguration } from "./Hooks/useConfiguration"; 이 처럼 부모 폴더가 같은 컴포넌트를 사용할 때, 컴포넌트 하나 당 import 구문이 한 줄씩 추가된다. 이를 정리하기 위해 index.js(ts)..

[React] 불변성을 쉽게 유지하는 Immer lib

리액트에서 객체나 리스트는 항상 불변성이 유지되어야한다. (정말 싫다) spread, map, filter, concat 등 정말정말 불편하다. 이를 쉽게 해주는 Immer 라이브러리가 존재한다. 설치 $yarn add immer //보통 produce로 사용한다. import produce from 'immer'; 사용 const myObject = { index : 1, name : 'park' }; //produce 함수를 사용하면 간단히 불변성 유지를 하며 요소의 변경이 가능하다. const nextState = produce(myObject, draft => { draft.index += 1; }); useState와 함께 사용 const onClick = useCallback(() => { /..

[React] useContext 및 Context API

[리액트] 전통적인 Context 이해하기. Context 리액트의 기본 흐름은 트리 구조이다. 컴포넌트 내에서 자식 컴포넌트를 호출하고, 자식 컴포넌트는 그 하위 컴포넌트를 호출하게 된다. 최상단 컴포넌트에서 최하위 컴포넌트로 props를 muhly.tistory.com 오래전 포스팅에서 클래스형 컴포넌트에서 사용하는 방법을 알아봤고, 이번에는 Hook의 형태로 사용하는 방법을 알아보겠다. 리액트의 Context API는 플러터의 provider와 굉장히 흡사하다. 아마, 플러터의 provider가 리액트의 것을 벤치마킹 한 것 같다. 하지만, provider의 값이 변경되어도 notifyListener()와 같은 함수는 동작하지 않는다. 다시 말해 상태 갱신은 별도이다. 따라서 useState나 di..

[리액트] useReducer 이해하기

Hook을 사용한 함수형 리액트에서는 useState와 값을 전달하는 함수로 상태 변수들을 관리했다. useState는 반드시 컴포넌트 내부에 선언되어 있어야 하고, 하나의 상태 변수에 대해 여러개의 함수를 정의해서 연산한다. 단순한 구조라면 useState가 간단하지만, state와 관련된 부분을 재 사용해야하거나, 하나의 상태 변수에 관여하는 연산이 많아질 경우 코드의 가독성이 떨어지게 된다. 이를 위해 useReducer를 사용한다. useReducer는 하나의 상태 변수에 관여하는 함수들을 하나로 묶고, 다른 컴포넌트에서도 재 사용 할 수 있도록 해준다. 또, 상태 변수의 관리는 controller에 해당하는 부분이므로 별도의 파일에 useReducer를 정의해서 사용한다면 MVC 형태로도 구축 ..

[React] 불필요한 렌더링 최적화하기

useMemo를 사용해 렌더링에 따라 불필요한 함수가 재호출 되지 않도록 했고, useCallback을 사용해 렌더링에 따라 불빌요하게 함수가 재정의되지 않도록 했다. 이번에는 불필요한 렌더링을 막아보자. React.memo //선언 방법1 const ListContainer = React.memo(({ element, active, onRemove, onEdited }) => { ... } //선언 방법2 export default React.memo(ListContainer); 컴포넌트를 React.memo()로 감싸는 것만으로도 불필요한 렌더링을 막을 수 있다. 부모 컴포넌트에서 setState가 발생하면 자식 컴포넌트들이 모두 렌더링 되는데, 이때 props가 변경되지 않았다면 렌더링 하지 않는다..