React/Velopert's React (22) 썸네일형 리스트형 [React] Study # 22 | Immer를 사용한 더 쉬운 불변성 관리 리액트에서는 배열이나 객체를 업데이트 해야할 때, 직접 수정하면 안되고 불변성을 지켜주면서 업데이트를 해주어야한다. 이때, concat, filter, map등의 함수를 사용해야한다. 하지만, 만약 객체의 데이터 구조가 복잡해지면 불변성을 지켜가며 새로운 데이터를 생성해내는 코드가 조금 복잡해지게 된다. 이때, immer라는 라이브러리를 사용하면 우리가 상태를 업데이트 할 때, 불변성을 신경쓰지 않으면서 업데이트를 해주면 Immer가 불변성 관리를 대신 해준다. Immer 사용법 1️⃣ Immer 설치 yarn add immer 2️⃣ immer 불러오기 보통은 produce라는 이름으로 불러온다. import produce from 'immer'; 3️⃣ produce 함수 사용법 첫번째 파라미터 : .. [React] Study #21 | Context API를 사용한 전역 값 관리 이전 #20 까지 공부했던 챕터에서 까지, 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달해주었다. 컴포넌트 한개 정도를 거쳐서 전달하는 것은 사실 큰 불편함은 없지만, 만약 3~4개 이상의 컴포넌트를 거쳐서 전달을 해야하는 일이 발생한다면 매우 번거로울 것..! 그럴 땐, 리액트의 Context API와 이전 #20에서 배운 dispatch를 사용하면 복잡한 구조를 해결! 💡 Context API? 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있다. 꼭 상태를 가리키지 않아도 된다. (값!) 이 값은 함수일 수도, 외부 라이브러리 인스턴스 일 수도 있고, 심지어 DOM일 수도 있다. 1️⃣ Context 만들기 const UserDispatch = React.createCon.. [React] Study #20 | 커스텀 Hooks 만들기 커스텀 Hook은 언제 필요? 컴포넌트를 만들다보면, 반복되는 로직이 자주 발생 input을 관리하는 코드는 관리 할 떄마다 꽤나 비슷한 코드가 반복 이번 포스팅 내용은, 위의 상황에 커스텀 Hooks를 만들어서 반복되는 로직을 쉽게 재사용하는 방법을 알아보는 것이다. 커스텀 Hooks 만드는 방법 src 디렉터리에 hooks라는 디렉터리를 만들고, 그안에 useInputs.js 파일을 만든다 커스텀 Hook을 만들대는 보통 이렇게 use 라는 키워드로 시작하는 파일을 만들고 그안에 함수를 작성한다. 파일안에 useState, useEffect, useReducer, useCallback등 Hooks를 사용하여 원하는 기능을 구현해주고 컴포넌트에서 사용하고 싶은 값들을 반환해주면 된다. useInputs.. [React] Study #19 | useReducer : 상태 업데이트 로직 분리 Study #19 까지의 상태관리는 어떻게 해왔을까? 주요 상태 업데이트 로직을 App 컴포넌트 내부에서 이루어왔다 상태를 업데이트 할 때, useState를 사용해서 새로운 상태를 설정했다. 💡useReduder? useState를 사용하여 상태를 관리하는 것이 아닌 또다른 상태관리 방법 이 Hook 함수를 사용하면 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있다. 심지어 다른 파일에 상테 업데이트 로직을 작성한 후, 사용할 수 있다. 💡reducer? 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reduer(state, action) { // 새로운 상태를 만드는 로직 // const .. [React] Study # 18 | React.memo 💡React.memo? 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능을 최적화 시켜주는 함수! 이 함수를 사용하면, 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정해줄 수 있다. 사용법은 그냥 감싸주면 됨! CreateUser.js 에 적용 // 컴포넌트 리렌더링 방지를 위한 React.memo export default React.memo(CreateUser); 왕 쉬움! UserList.js 에 적용 import React, {useEffect} from 'react' // user리스트들이 보여지는 부분 const User = React.memo(function User({user, onRemove, onToggle}) { return( onT.. 이전 1 2 3 4 5 다음