리액트에서 객체나 리스트는 항상 불변성이 유지되어야한다. (정말 싫다)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(() => {//useCallb..

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

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

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

useMemo useMemorize를 줄여 useMemo라고 한다. useMemo는 useEffect가 특정 변수 값이 변경되면 호출되듯 특정 변수 값이 변경되어야만 렌더링이 되게끔 하는 Hook이다. setState가 발생하면 해당 컴포넌트와 하위 컴포넌트가 모두 리렌더링된다. 이 때, 연산을 거쳐 값을 출력하는 경우 값이 바뀌지 않더라도 연산이 리렌더링 마다 발생하게 된다. 불필요한 연산이 발생하는 것이다. 이를 위해 useMemo를 사용해, 함수의 불필요한 호출을 막는다. 단, 렌더링이 이루어지지 않는 것은 아니다. 이는 컴포넌트 최적화가 필요한 부분이다. const userCount = () => { console.log("갱신"); return userList.length; }; return( ..