웹개발/react

Custom hook이란? (1) input 갯수만큼 늘어나는 useState, event handler 들 // src/App.jsx import React from "react"; import { useState } from "react"; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState(""); cons..

React Query란? 기존 미들웨어의 한계 보일러 플레이트 : 코드량이 너무 많다. 규격화 문제 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아니다.(규격화 문제) 리액트 쿼리의 강점 : 너무 쉽고, 책임에서 자유롭다 보일러 플레이트 만들다가 오류날 일이 없다. 내가 만든 부분 아니기 때문에 잘못이 일어난들 내 잘못이 아니다. 사용방법이 기존 thunk 대비 너무 쉽고, 직관적이다. 주요 키워드 Query 어떤 데이터에 대한 요청을 의미한다. axios의 경우 get 요청과 비슷하다. const response = await axios.get(’http://localhost:3000/todos’) Mutation 어떤 데이터를 변경하는 것. 어떤 데이터라 함은, 데이터 그룹 그 자체를..

불변성(immutability)란? 불변성이란 한번 생성된 원본의 데이터는 변경 시키지 않고, 데이터 변경 시 새로운 원본을 만드는 디자인 패턴이다. 불변성X -> mutable - 원본 데이터가 변할 수 있다는 의미 - 배열의 push 메소드 const arr = [1,2,3,4,5]; arr.push(6); console.log(arr); // [1,2,3,4,5,6] // push 메소드는 원본 배열인 arr의 값 자체를 변경시킨다. 불변성O -> immutable - 원본 데이터가 변할 수 없다는 의미 - 배열의 map 메소드 const arr = [1,2,3,4,5]; arr.map(el => el * 2); // [2,4,6,8,10] 이 리턴됨. console.log(arr); // [1,2..

리덕스 툴킷(Redux Toolkit)이란? (1) 리덕스 툴킷 리덕스를 개량한 것 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 지나치게 복잡하여 이를 보다 편하게 쓰기 위해 만든 것 줄여서 RTK라고도 한다. 일반 리덕스와 코드 비교 (1) 툴킷 설치하기 CRA를 통해 새로운 프로젝트를 생성하고, yarn을 통해 아래 패키지를 설치한다. yarn add react-redux @reduxjs/toolkit (2) count 프로그램 코드 비교 // 일반 리덕스 예시 코드 // Action Value const ADD_NUMBER = "ADD_NUMBER"; const MINUS_NUMBER = "MINUS_NUMBER"; // Action Creator export const addNumb..