'리액트' 태그의 글 목록

[리액트] 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();

[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 - 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 를 사용해서 변수를 선언해주고 그 안에 초기값을 넣어줍니다...

[React/리액트] Error: App(...): Nothing was returned from render 에러 해결 방법

2022.09.19· 개발/❌ 오류 노트

📢 Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. ✅ 오랜만에 만난 정말 간단한 에러! 최근에 만난 에러들은 기본 2시간 잡았던것 같았는데, 이 에러는 정말 간단하게 찾아냈다. 괄호가 어딘가에서 미씽되었던것!! 그래서 return 의 자리에 return 이 제대로 들어가지 않아서 생긴 에러이다! 어딘가에서 return 을 제대로 해주지 못 할 때 나타나는 에러이니, 찬찬히 코드를 살피다보면 바로 해결 할 수 있다!

React Testing Library 사용하기 (from Scratch) - 1

2022.04.29· 개발/React

테스트코드는 왜 중요한가요? 테스트코드는 코드를 리팩토링 할 때, 혹은 리팩토링을 하지 않아도 중요한 존재입니다. 리팩토링을 할 때에는 테스트코드를 짜두고 리팩토링을 하면 하기 전과 후의 결과가 동일하다는 것을 보장할 수 있습니다. 외에도 새로운 기능이 추가되거나 기존 기능이 변경되었을 때 다른 기능들이 제대로 동작하지 않을 수도 있기 때문에 테스트코드를 만들어두면 유지보수할 때 예상치 못 한 에러들을 미리 방지할 수 가 있습니다. 다양한 개발서적에서도 이 중요성을 굉장히 강조하고 있습니다. React Testing Library는 세부적인 구현사항보다는 실제 사용자 경험과 유사한 방식의 테스트를 작성하기를 권고합니다. 예를 들어서 div 태그를 사용하는지 보다 div 테그의 메세지가 브라우저에 잘 노출..

[React] React Custom Hooks

2022.03.23· 개발/React

* 면접에서 받았던 질문인데, 답은 고사하고 질문 자체를 이해 못 할 정도였으니, 알지 못했던 개념이였습니다. 😥 Custom Hooks 두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리합니다. 컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있습니다 - 이상 공식 자료에 나온 설명인데, 아직 이해하기에는 부족한 설명 같습니다. 반복되는 훅 활용 메소드들을 하나로 줄여줌으로써 더 간결하고 보기 좋은 코드를 만들 수 있는 것이 바로 custom hooks입니다 이름은 use로 시작하는 자바스크립트 함수입니다. custom hook은 다른 hook을 호출 할 수 있습니다 custom hook은 조건부 함수가 아니어야 합니다 역시 코드를 보면 이해하기 좋을 거..

[React] 리액트 프로젝트 Netlify로 배포하기

2022.02.21· 개발/React

알고보면 넘나 유용한 사이트인 Netlify! 주로 호스팅을 하기 위해서 썼는데, netlify dev 라는 기능도 있어서 백엔드부분까지 살짝 도와줄 수 있는 기능도 가지고 있다. dev 기능을 알게 된지 얼마 안 되서 깊이 공부를 아직 못 했지만 유용하다고 생각했음 ㅎ 오늘은 react netlify 배포에 대해서 알아보자! Netlify ( https://app.netlify.com/ ) 1. 계정을 생성합니다 이메일로도 계정을 만들 수 있지만 git과 연동할 수 있답니다. git 계정이 있다면 손쉽게 계정을 만드실 수 있어요 2. 상단 메뉴의 [Sites] 나 [new site from git] 을 클릭합니다. netlify로 배포하는게 무료라는 이점도 있지만, git에 올라가 있는 프로젝트를 바로..

[항해99] Day55. TIL – 리액트 무한 스크롤 ( w. redux & react-infinite-scroll-component )

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐들어가며 실전 프로젝트에 들어가는 기능과 디자인을 살펴보다가 당연하게 무한 스크롤을 써야한다는 의견이 나왔다. 강의를 보며 구현해본 적도 있고 이전 미니 프로젝트를 하면서 구현을 직접 해보지는 않았지만 코드를 함께 봤던 적이 있었다. 하지만 본 것과 직접 구현하는 것은 천지 차이라는 점. 메인 페이지 게시글을 조회하는 부분에서 필요한 기능인데 내가 맡게 된 페이지는 아니지만 무한 스크롤을 구현해보고 싶어서 따로 구현했다. ⭐ react-infinite-scroll-component 리액트에서 무한 스크롤을 구현할 수 있는 방법이 몇 가지가 있는데, 1) 브라우저의 onScroll을 이용해서 scrollHeight 값을 사용하는 거다. 2) Intersection..

[React.Js] 리액트 Router 사용하기

2022.02.18· 개발/React

리액트로 간단한 게시판을 만들어보기로 했다. 이 게시판에 들어가는 기능 중에 하나가 정보를 추가하는 것이다. 추가하기 위해서 등록페이지를 따로 만들고 메인 페이지를 따로 만들어야해서 router을 써야했다. React Router 리액트는 SPA (Single Page Application) 방식으로써, 여러 개의 페이지를 사용하며, 새로운 페이지를 로드하는 기존의 MPA 방식과 달리 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가집니다. 그림처럼 하나의 html 파일에서 회원추가 페이지로 넘어가기 위해서 클릭시 html이 바뀌는게 아니라 회원추가.js로 데이터가 렌더링해오는 방식이 SPA입니다. 그리고 이걸 하기 위해서 react-router가 필요합니다.

티스토리툴바