'개발/React' 카테고리의 글 목록

2024.08.13· 개발/React

현재 작업 중인 프로젝트에서 받은 코드 피드백을 정리하다가 useMemo를 처음으로 사용해봤다. 리액트를 주로 사용하는 프론트엔드로 일하면서 면접때나 마주하던 useMemo라는 리액트 훅. useMemo ? 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 리액트 훅이다. 어떻게 컴포넌트의 성능을 최적화해주는냐하면은 보통 예시로 연산작업을 많이 든다. 계속해서 동일한 연산이 일어나는 작업에는 새로 처음부터 연산할 필요없이 디펜던시가 있으면 먼저 현재 의존값과 이전의 외존값을 비교하여 변경되었는지 확인합니다. 새로운 동작이 일어났을 때 기존의 값을 기억하고 있다가 거기서 부터 연산을 시작한다. 메모된 값을 저장하기 위해 메모이제이션 캐시를 사용합니다.캐시는 메모된 값을 나타내는 키와 종속성을 나타내는 값..

[리액트/TS] React-beautiful-dnd를 사용해서 drag & drop 표현하기

2023.11.21· 개발/React

이번엔 드래그 앤 드랍을 구현해야했습니다. 이전에도 구현했던 적이 있었는데, 그건 이미 누군가 적어둔 코드를 카피 앤 페이스트 했던지라😅 (양심고백). 처음부턱 적용하게 되니 어떤 라이브러리를 쓸까, 또는 라이브러리를 쓸 필요가 있을까? 등의 고민을 하게 되었습니다. 동료가 라이브러리를 쓰지 않고 구현하려고 했는데, 다시 생각해보니 코드가 너무 복잡해져서 쓰는게 좋을 것 같다고 리서치를 부탁했고, 저는 두 가지의 옵션을 찾았습니다. react-dnd react-beautiful-dnd 두 가지를 비교했을 때, beautiful-dnd가 현저히 많이 사용되고, 그 만큼 이슈도 많긴했습니다. ㅎ 자유도적인 면을 비교했을 때는 react-dnd가 확실히 더 높아보였지만, 저는 칸반을 만드는 것도 아니고 ver..

[리액트/Axios] Http GET 요청 body에 데이터를 담아 보낼 수 있다?

2023.11.14· 개발/React

백엔드 개발자님: 해당 api 업데이트했습니다. 메소드는 get이고 body에 담아서 보내주시면 됩니다~ 나: 넵~~ 결과 : ERROR ERROR 왜?? 👀 ?? 심지어 Redux로 작성한 api instance에서도 body를 담는걸 거부 ㅋ .. 파라미터가 url, config 이상으로 못 받는다고 뱉어냄. 시니어개발자님: get 요청하는데 바디에 담는다고??👀 나: 넵- 전에 그렇게 했는데요?😳? 안 되나요? 이전에도 게시판에서 검색할 때 get 메소드로 요청하며 바디에 담아서 보낸 기억이 있기에 - 당연하게~~~~ body에 담는거 오키도키요! 했던 상황. 혼란만 가중되는 상황 그래서 정리한다. 일단 결론만 보자면, pararms 를 써서 요청하면 config에 담겨서 get 요청시에도 바디에 ..

[리액트] useNavigate로 props 전달 & useLocation 으로 받기

2023.11.14· 개발/React

Redux를 사용해서 데이터를 전역으로 관리할 필요가 없을 때, useNavigate로 라우팅하면서 함께 해당 페이지로 데이터를 보낼 수 있는 방법이 있다. useNavigate와 useLocation이면 가능하다! 1. useNavigate() useNavigate를 사용해서 이동 경로로 state값 전달하기 const navigte() = useNavigate(); navigate("이동할 경로", state:{ "전달하고자 하는 데이터" }); 2. useLocation() useLocation을 써서 props 받기 const { state } = useLocation();

[Redux] Redux toolkit 기초 코드 정리

2023.11.10· 개발/React

Redux(리덕스)란? 리덕스는 오픈 소스 자바크스립트 라이브러리의 일종으로 ,state를 이용해 웹 사이트 혹은 애플리케이션의 상태관리를 해줄 목적으로 사용합니다. 베이스는 Node.js 모듈로 store 라는 하나의 데이터 공간(저장소)를 가지고 전역적으로 데이터를 전달하기 위해 쓴답니다. Redux Toolkit (리덕스 툴킷)이란? 기존의 리덕스의 구조와 패러다임은 거의 동일하지만 코드량은 더 적게, 사용하기 편하게 개선된 것이라고 보면 좋을 것 같습니다. 리덕스 툴킷의 장점 리덕스와 비교해보자면 우선 초기 설정시에 리덕스는 스토어를 구성하기 위해서 설치해야했던 각종 패키지들을 설치하지 않아도 됩니다. 툴킷에는 이미 설치되어있기 때문입니다! 그리고 불변성에 대해서 신경쓰지 않으셔도 됩니다! 이런 ..

[React/Typescript] 가로세로 모두 드래그가 가능한 슬라이드 만들기

2023.11.03· 개발/React

drag and drop 기능을 구현해서 당연하다는 듯이 라이브러리를 찾아 썼는데, 웬걸 - 가로로 움직이는 슬라이드 구현을 하고 그 안에 보여지는 부분은 아래위로 스크롤이 되어야 한다. 게다가 웹앱인지라 터치로 드래그까지 되야하는 상황이었다. 처음에 구현했을 때는 siwper라는 리액트 라이브러리를 사용했고, 슬라이드 안쪽 부분에도 다른 드래그 라이브러리를 추가해서 진행했는데, 여러 가지 이유에서 제대로 구현을 할 수가 없었다. 간단하게 사유를 이야기해보자면, 라이브러리까지 충돌을 한다. 간편하게 쓰자고 라이브러리 쓰는데 서로 충돌해서 난장판이 된다. 충돌 안되는걸 찾았더니 가로 슬라이드 구현을 도운 라이브러리가 모든 마우스 이벤트를 다 뺏어가서 다른 라이브러리가 먹히지 않는 일도 발생했다. 결국은 하..

[react/typescript] Swiper 사용기

2023.10.29· 개발/React

맨날 정해져있는 템플릿을 이용한 기능 개발만하다가 모처럼 새로운 UI를 짜야하는 일이 생겼다. 밑밥을 깔아보자면 ㅋㅋ... 처음부터 빌드한 프로젝트가 아니라 중간에 끼여든 프로젝트였기에 코드를 읽을 때부터 버벅이긴 했다. 자 이제 밑밥은 깔림. 내가 해야할 목록 1. swiper 라이브러리를 쓴다. 2. navigator 버튼을 나오게하고 첫 슬라이드에서는 왼쪽 버튼이 사라지게 마지막 슬라이드는 오른쪽 버튼이 사라지게한다. 3. 슬라이드는 마우스 드래그로도 가능하게한다. Code import React, { useState } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; const Projects = () => { const [sw..

🥲 아니, 이게 왜 안 되는거야?!?! - 비동기 프로그래밍과 Promise에 대하여

2023.09.10· 개발/React

이미지를 다루는 작업을 진행하게 되었는데, 기존에 해오던 것과 달리 이번에는 여러 이미지를 배열 형태로 보내서 url를 받아와서 다시 그 데이터를 다른 데이터와 함께 create 혹은 update를 해줘야했다. 그런데, 만약에 기존에 url이 있는 상태면 pass를 하고 새로 넣은 이미지만 url을 다시 받아와서 update를 해줘야하는 것에서 문제가 생겼다. api를 호출하기 전에 console.log로 body를 찍으면 분명히 업데이트 된 이미지 url이 찍히는데, 막상 api를 호출하면 payload에 업데이트된 값이 안 찍히는 것이다!!!!!!!! 반나절을 붙잡고 늘어져있는데 미칠지경... async - await를 써서 비동기처리를 해줬는데 뭐가 불만이니?! 뭐가 잘 못 된건데?! .... 문제..

[리액트] React-Query - 2. CacheTime , StaleTime (feat.ReactQueryDevtools)

2023.05.09· 개발/React

React-Query 장점 중의 하나였던 캐싱이야기를 해보려고합니다. 캐싱을 이야기 전에 알아두면 좋을 tool이 있습니다. 바로 ReactQueryDevtools 이라는 것으로 데이터가 fetching 되고 그 상태값이라던가 내부 내용을 자세히 볼 수 있게 도와주는 tool입니다. react query 라이브러리에서 제공하는 강력한 도구입니다. ▶ ReactQueryDevtools 사용법 import { ReactQueryDevtools} from 'react-query/devtools'; //이렇게 import 합니다 function App() { return ( ); } 아래와 같이 화면 하단 오른쪽에 뜬 버튼을 보실 수 있어요. 클릭을 하면 오른쪽 화면처럼 뜹니다. tools 안에서 fresh ,..

[리액트] React-Query - 1. data fetch & error

2023.05.08· 개발/React

React-Query 비동기 통신 fetch, axios 등을 사용하면서 서버 상태 관리 및 비동기 로직을 쉽게 다루게 해주는 라이브러리 비동기 통신을 하는 방법은 몇 가지 있지만 react-query를 사용하면 요청을 보내는 콜백함수를 전달하기만 한다면 라이브러리에서 제공해주는 많은 기능들(캐싱, 값 업데이트, 에러 핸들링 등)을 이용할 수 있으며 코드도 매우 간단해집니다. 사용하는 이유 서버로부터 값을 가져오거나 업데이트를 해야하는 로직을 store에서 개발해야하는 경우들이 많습니다. store는 client에서 state를 유지하면서 내부에 client data 와 server data 가 공존을 하게 되는 순간이 생겨납니다. 데이터들이 서로 상호작용하면서 혼란을 빚어내는데 react-query를 ..

[리액트] React image file Resize 하기 / react-image-file-resizer

2022.11.28· 개발/React

이미지파일을 많이 다루는 업무를 보고 있다. 갑자기 추가된 어떤 이미지에 대해서 프론트쪽에서 사이즈를 바꿔서 전달해야할 일이 생겼다. 그래서 찾아서 쓰게 된 라이브러리가 React Image File Resizer 넓디 넓은 리액트 생태계에서 없는게 없다. 이미지의 width, height, format 등을 바꿀 수 있게 도와주는 패키지이다. 설치하기 npm i react-image-file-resizer or yarn add react-image-file-resizer 사용하기 //불러오기 import Resizer from "react-image-file-resizer"; //어떻게 변경할 건지에 대한 내용을 차례 차례 넣어주면 된다. Resizer.imageFileResizer( file, //바..

[리액트] useRef 사용하기 - 리액트에서 특정 DOM에 접근하기

2022.11.15· 개발/React

useRef 를 자주 사용하지 않는데, 오랜만에 업무를 보다가 사용할 일이 생겼었다. 그래서 다시 한번 정리해본다!! useRef 사용하기 리액트를 사용하면서 주로 useRef를 사용할 때는 특정 DOM 요소에게 접근해야할 때이다. 컴포넌트에 생긴 스크롤 동작을 제어해야하는 상황이 있었는데, 이때 useRef를 써서 하면 된다. 이 외에도 포커스를 설정해줘야한다던지, 크기를 특정해야한다던지 DOM요소에 대한 세세한 것들이 필요할 때 쓸 수 있다. 저는 리액트를 함수형으로 쓰고 있기때문에 useRef hook에 대한 이야기를 합니다. 클래스형은 콜백함수도 써야하고. 살짝 방법이 다릅니다. useRef 선언하기 선언 방법은 간단합니다. useRef 를 사용해서 변수를 선언해주고 그 안에 초기값을 넣어줍니다...

티스토리툴바