목록리액트 (32)
FrontEngineer JungBam
예전에 유데미 강의를 들으면서 자바스크립트로 구현했던 드래그 앤 드롭을 리액트에서 구현하기 위해서 라이브러리를 찾아보던 중 이전에 사용했던 react-dnd보다 친절한 라이브러리가 없을까 라는 생각으로 npm에서 찾아봤다. 그래서 이번에 작업하면서 사용하기로 결정한 것은 rect-beautiful-dnd였다. 일단 주간 사용량이 150만건이고 가장 최근에 이슈가 해결된 것으로 보아 그래도 관리는 되고 있다고 생각이 들었다. 직접 구현해도 되지만 왜 라이브러리를 쓰냐 라고 한다면 깔끔한 드래그앤 드롭 이벤트를 구현하려면 dragstart - drag - dragenter - dragover - drop - dragleave 의 6가지 절차를 각각 잘 만들어줘야 하는데 이걸 각각 기능구현하고 애니메이션 작업..
import React, {useState} from 'react'; const useValidation = () => { const [isValid, setIsValid] = useState({ title: false, content: false, }); const lengthCheck = (input, words, max) => { if (2
import React, { useState } from "react"; import axios from "axios"; import { useDispatch } from "react-redux"; import { initialTodos } from "../../../redux/modules/postSlice"; const instance = axios.create({ baseURL: "http://localhost:3001", headers: { "X-Custom-Header": "foobar" }, timeout: 1000, }); export const useAxios = (url) => { const [error, setError] = useState(false); const [isLoading,..
redux의 휴먼이슈 해결을 위해 덕스 패턴을 사용했다면 좀 더 편이성을 느낄 수 있는 redux-toolkit! 아직 코린이라 store와 reducer만을 사용하여 redux의 기능만 사용했다면 이걸 굳이? 라고 느낄 수 있는 redux-toolkit.. 지난 주 redux로 만든 것을 redux-toolkit으로 같은 로직으로 만들었다. store부터 보면 store에서는 다른 부분보다 configureStore의 역할이 눈에 띄는데, 이 친구는 redux에서 createStore와 combinedReducers의 기능을 합쳐서 태어난 놈이다. 결론 적으로는 하나로 두개의 기능을 하도록 만든 것! import { todoReducertool } from "../module/todoReducertoo..
작은 커스텀 훅들을 만들어보다가 지난주 과제로 받았던 http통신에 대한 훅을 만들기를 시도했다. (...구글링을 3시간은 넘게 하면서 이것저것 찾아보고 하다가 만들었는데..문제가 많다.) 무슨 함수를 리턴받아서 컴포넌트에서 실행하고자 useEffect에서 호출하니까 무한 루프에 빠져서 탈출하려고 useCallback으로 어찌저찌 땜빵은 했는데.. 훅을 만들었는데 오히려 머리가 아파진건 왜인지ㅠㅠ import { useCallback, useState } from "react"; const useHttp = (funcHttp) => { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); co..
함수를 의존성 배열에 추가해야할때에는 렌더링 될때마다 자료구조와 마찬가지로 새로운 함수가 만들어지기 때문에 useCallback으로 함수를 감싸줌으로써 생겨날 수 있는 버그나 무한루프를 방지해야 한다.
useState를 통해 매우 쉽게 구현이 가능했다. 상태를 통해 로딩중인 곳을 캐칭해서 그 기간동안에 로딩화면을 렌더링 해주면되는 것. 리액트..........할 수록 너무 재미있다. (세부 코드는 프로젝트 다 하고 나면.. 그때 결과랑 추가예정)