React
-
[React Query] (4) useMutation()Front-End(Web)/React - 라이브러리들 2022. 8. 10. 20:59
🧐 서론 지난 포스팅까지, useQuery()를 쓰는 다양한 기법들과 더욱 확장된 기능을 위한 훅들을 알아보았다. (useQueries, useInfiniteQuery 등) 계속 언급했듯, useQuery()는 데이터 조회(HTTP 요청의 GET)를 담당하는 훅이다. 이번 포스팅에서는, useMutations() 훅을 통해 POST, PUT, DELETE를 어떻게 핸들링하는지 알아보도록 하겠다! (공식문서는 위 요청을 Mutation으로 구현할 것을 권장한다. useQuery의 onSuccess, onError로 POST도 구현가능하나 가급적 지양) * https://www.youtube.com/watch?v=NYCG1o38oEQ&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&i..
-
[React Query] (3) useQuery() 고급 - Parallel, Dependent, Paginated, InfiniteFront-End(Web)/React - 라이브러리들 2022. 8. 2. 01:07
🧐 서론 앞에서는, React Query의 가장 기본 개념이 되는 useQuery() 메서드에 대해 알아보았다. (이는, GET 요청을 담당) 이번 포스팅도 useQuery() 에서 이어지는 내용들이며, 이를 사용하는 다양한 방법들 그리고 확장된 기능들을 구현하기 위해 지원되는 useQuery() 외의 메서드들을 집필해보려고 한다. * https://www.youtube.com/watch?v=2s2iJLLDwgk&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=14 🌺 useQuery() 더욱 잘 쓰기 - Custom Hook으로 분리하기 아래 예시는 이전에 useQuery() 로 구현한 리스트 페이지이다. import { useQuery } from "react-que..
-
[React Query] (2) useQuery()Front-End(Web)/React - 라이브러리들 2022. 7. 26. 21:14
🧐 서론 첫 번째 포스팅에서는 React Query를 도입하는 배경과 장점, 그리고 기본개념들을 우선 정리하였다. 그리고, 이번 포스팅부터는 실질적으로 다루기 위한 문법들을 정리하려고 한다. React Query에는 주요 개념들이 있었으며, 이번 주제는 비동기 데이터를 지칭하는 쿼리(Queries)를 다루는 문법들이 될 것이다. 쿼리 데이터를 패치하는 useQuery() 메서드와 이 데이터를 다루기 위한 다양한 방법들을 정리해보겠다! * https://www.youtube.com/watch?v=Ev60HKYFM0s&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=3 🌺 useQuery() : 데이터 패치 Hooks 우선, 어플리케이션의 컴포넌트 트리 최상단에 설정했던 ..
-
[React Query] (1) React Query 시작하기Front-End(Web)/React - 라이브러리들 2022. 7. 25. 18:55
🧐 서론 React에서 사용되는 기술들에 계속해서 관심가지던 도중, 최근 React Query를 통한 API fetching이 많다는 것을 느꼈다. 대게 라이브러리들이 그렇듯, 기존의 fetch() 함수나 axios에 비해 더 많은 기능을 제공할 것이라 생각된다. (패치상태, 캐싱 등) 또한, Redux의 경우를 생각하면 비동기 패치와 상태관리 등을 위해 서드파티 라이브러리 설치가 필수적이었다. (비동기 패치를 위한 Redux-thunk, Redux-saga, 상태관리를 위한 Redux-toolkit 등) 그렇지 않아도 번거로운 Redux 설정이 서드파티로 인해 더욱 비대해지고, 범용적으로 쓰이는 saga는 제너레이션 문법이 요구된다는 등의 사용성 이슈가 존재한다. 유튜브 강의 전개내용을 적당히 분할하면..
-
[CSS/Side Lib.] Emotion.jsFront-End(Web)/HTML, CSS 2022. 7. 21. 00:35
🧐 서론 작년, React 개발을 막 시작할 때 Styled-Components 라이브러리에 대해 포스팅하면서 CSS-in-JS를 같이 언급하였다. CSS-in-JS는 말 그대로 스타일 정의를 css파일이 아닌 JS로 작성된 컴포넌트에 삽입하는 기법이다. 그렇기에, 컴포넌트 단위로 개발하는 모던 프레임워크에서 각광받는 기법이며, Styled-Components, Emotion.js 등이 대표적인 CSS-in-JS 라이브러리로 사용되고 있다. CSS-in-JS는 컴포넌트 단위 개발 외에 아래와 같은 장점들, 그리고 trade-off성 단점들을 가지고 있다. [장점] 컴포넌트 내에 CSS를 작성하므로, 별도의 stylesheet 파일을 관리할 필요가 없다. CSS 모델을 Global 레벨이 아닌 컴포넌트 레..
-
[React] Container Component 제작 - ClickOutside, TooltipFront-End(Web)/React - 프레임워크(React, Next) 2022. 7. 5. 02:10
이번 포스팅 역시 과제를 진행하면서 새로이 경험한 React 개발내용을 복기하면서 정리하는 글이다. 하나는 요소에 마우스를 호버했을 때 표현되는 툴팁, 다른 하나는 박스 외부를 클릭했을 때 닫히는 Click-Outside 기능이다. 기능적으로 연관성은 없으나, 코드상으로 둘 다 Container Component를 사용했다는 공통점이 있다. 또한, 회사에서는 둘 다 Vue의 Custom Directive로 구현되었는데, React에서는 어떻게 구현할지 리서치해보니 생각보다 컨테이너로 쉽게 구현이 되어서 이를 소개해보려고 한다. 💙 Click Outside 구현 위처럼, 특정버튼을 누르면 팝업창이 표현되고, 창 외부를 클릭하면 닫히는 UX를 제공하기 위한 기능이다. 검색창의 자동완성창, 프로필 등 클릭시 ..
-
[React] Infinite Scroll을 구현하는 2가지 방법Front-End(Web)/React - 프레임워크(React, Next) 2022. 7. 3. 18:19
🧐 서론 최근, 이직을 하게 되면서 많은 과제를 수행했었고, 처음 혹은 새로 구현하는 다양한 경험치들을 쌓을 수 있었다! 그 중에 하나가 기술할 Infinite Scroll(무한 스크롤) 로, 앱에서는 특히 이 기법을 통해 리스트 데이터를 추가하는 경우가 많다. 이전에 개인 프로젝트를 하면서 무한 스크롤을 구현했었고, 당시 window 객체의 스크롤값을 비교하는 보편적인 방법으로 구현했었다. (링크) [Javascript] Infinite Scroll (Height 속성) 🤔 배경 3차 프로젝트로 Nike 사이트 클론을 진행하면서, List 페이지를 연구하는테 아이템을 페이지네이션이 아닌 "인피니트 스크롤" 로 이어붙이는 로직으로 구성되어있는 것이었다. (아래는, abangpa1ace.tistory.co..
-
[React] React 18 의 달라진 점들Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 18. 01:15
올해 3월, React v18.0 이 정식 릴리즈가 되었다. (2020년 10월, v17.0 이 릴리즈된지 약 1년반) 업데이트 소식과 베타버전은 작년부터 리포트 되어왔으며, 최근 정식 릴리즈됨에 따라 이 포스팅을 한 번 정리하면 좋겠다는 생각이 들었다. 지난 React v17.0 은 호환성, 안정화 정도의 간단한 업데이트라면, v18.0은 주요 기능들이 많이 추가되어 이례적으로 작년에 알파버전까지 릴리즈하기도 했다. 이번 기회를 통해 React를 버전업하는 방법, 그리고 이번에 추가된 주요 기능들에 대해 알아보도록 하겠다! 💙 React 18 시작하기 이번 React 18 버전에서 추가된 주요기능은 크게 아래 3가지로 소개된다. automatic batching : 여러 개의 상태 업데이트를 한 번에 ..