본문 바로가기

전체 글55

Immer 리액트에서 배열이나 객체를 업데이트 해야 할 때에는 불변성을 지켜야 함 immer 라이브러리 사용하면 깔끔하게 코드 작성 가능 immer는 우리가 상태를 업데이트 할 때, 불변성을 신경쓰지 않으면서 업데이트를 해주면 Immer가 불변성 관리 대신 해줌 Immer 사용법 Immer 설치 $ yarn add immer 코드 상단에 Immer 불러옴 → 보통 produce이름으로 불러옴 import produce form ‘immer’; produce 함수 사용 첫 번째 파라미터: 수정하고 싶은 상태 두 번째 파라미터: 어떻게 업데이트하고 싶을지 정의하는 함수(불변성 신경쓰지 않고 그냥 업데이트하면 알아서 해줌) const state={ number:1, dontChangeMe: 2 }; const nextS.. 2022. 11. 24.
Context API https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.reactjs.org Context: 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터 제공 💡 React 애플리케이션에서 props 전달 방식: 위에서 아래로(부모에서 자식으로) → 애플리케이션 안의 여러 컴포넌트들에 전달해줘야 하는 props의 경우 해당 과정 번거로움 ⭐️ context 이용하여 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 해당 값 공유 가능 ❗️특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업이 3~4개 이상의 컴포넌트를.. 2022. 11. 24.
커스텀 Hooks 만들기 커스텀 Hooks 만들기 → 반복되는 로직을 쉽게 재사용 커스텀 Hooks를 만들 때에는 use라는 키워드로 시작하는 파일을 만들고, 그 안에 함수를 작성 만드는 방법: useState, useEffect, useReducer, useCallback 등 Hooks를 사용하여 원하는 기능 구현하고, 컴포넌트에서 사용하고 싶은 값들 반환 컴포넌트의 로직을 분리시켜 필요할 때 쉽게 재사용 가능 ex) input 관리하는 코드 커스텀 Hook 만들기 import { useState, useCallback } from "react"; function useInputs(initialForm) { const [form, setForm] = useState(initialForm); //change const onCha.. 2022. 11. 24.
useReducer useReducer 상태 관리 hook중 하나(useState처럼) 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리 가능 → 상태 업데이트 로직을 컴포넌트 바깥에 작성 가능, 심지어 다른 파일에 작성 후 불러와서 사용 가능 reducer: 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 됨 action은 업데이트를 위한 정보를 지니고 있음(객체의 형태는 자유) → type 값을 지닌 객체 형태로 사용 //카운터에 1을 더하는 액션 { type: 'INCRE.. 2022. 11. 24.

티스토리툴바