WoohyunKing의 개발 성장일지

이전에 Javascript Deep Dive 41장에서 타이머에 관한 내용을 다룬 적이 있다.( https://woohyun-king.tistory.com/136 ) [JS Deep Dive] 41. 타이머 41.1) 호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 만약에 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 후에 호출되도록 함수 호출을 "예약"하기 위해서는 Timer 함 woohyun-king.tistory.com 디바운스와 스로틀은 모두 짧은 시간 간격으로 연속으로 발생하는 이벤트 핸들러의 과도한 호출을 방지하기 위한 프로그래밍 기법이다. 그 중에 디바운스는 짧은 시간 간격으로 이벤트가 연속으로 발생하면 이벤트 핸들러를 호출하지 않다가, 일정 시간이 경과한 후에 이벤트 ..

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것입니다. (출처: React 공식 문서) 1) useContext Hook 이란? 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달할 때, 보통 props를 통해 데이터를 전달하는데, 그 깊이가 깊어진다면 거쳐가야 하는 컴포넌트도 많아진다. 또한 해당 props를 사용하지 않는 컴포넌트까지 중간에 거쳐가게 되는 상황이 올 수 있다. 그렇게 된다면 코드를 반복적으로 ..

useRef Hook은 저장공간(변수 관리), DOM 요소 접근을 위해 사용되는 리액트 훅이다. 여기서 Ref는 'Reference'의 약자로, 참조라는 의미를 가지고 있다. useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. (출처 : React 공식 홈페이지) 1) 저장공간(변수 관리) 컴포넌트 내에서 변수를 관리한다고 하면 이전에 배운 state를 떠올려볼 수 있다. 함수형 컴포넌트에서 state를 관리하고 수정할 때 useState Hook을 사용하고, state가 변경될 때마다 컴포넌트가 다시 렌더링되는데 함수형 컴포넌트에서 다시 렌더링 된다는 것은 함수 자..

0) Recoil 이란 ? Recoil은 React 프로젝트를 위한 많은 전역 상태관리 라이브러리들 중 하나로, 2020년 5월 Facebook에서 출시하였습니다. 그렇기에, 다른 라이브러리(Redux, Mobx)와는 달리 React 전용이며 React에 최적화되어 있다고 할 수 있습니다. Recoil을 통해 전역 상태를 관리하면 코드가 굉장히 간결해지는데, 기존의 context API는 전역 상태를 전달할 때 객체 형태의 value를 사용하기 때문에 객체 안의 값이 하나라도 변경되면 provider로 감싼 모든 하위 컴포넌트들이 리렌더링된다는 단점이 있습니다. Recoil의 경우 각각의 전역 상태에 대한 atom이 생성되고 해당 상태를 구독하는 구성 요소만 리렌더링 됩니다. 따라서 불필요한 리렌더링을 ..

1) react-hook-form 이란? React Hook Form (TypeScript) React Hook Form은 TypeScript로 빌드되었으며, FormData 유형을 정의하여 form 값을 지원할 수 있다. ⇒ 리액트에서 form으로 작업하기에 가장 좋은 최고의 라이브러리 😎 사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 form이다. 즉, 많은 form들을 관리해야 하거나, 검증 과정을 거치는데 시간과 코드를 절약할 수 있다 ⭐️ react-hook-form은 form에서 사용될 많은 state와, 데이터의 타입을 체크하고 조건을 확인하는 검증(Validation) 과정을 줄여준다 ! 1-1) react-hook-form을 사용하지 않은 경우 1-2) react..

1) react-helmet은 왜 사용하는가? 리액트는 SPA이라, 각 검색 로봇(크롤러)들이 리액트로 만들어진 사이트를 읽을 때 단 하나의 public/index.html 만을 읽게 됩니다. 이는 각각의 페이지에 대한 정보를 읽지 못한다는 단점이 있습니다. 이러한 SPA의 단점을 극복하기 위해 나온 것이 바로 react-helmet 라이브러리 입니다. react-helmet은 페이지 별로 meta 태그를 다르게 정의할 수 있는데, 이는 검색엔진최적화(SEO)에 있어 매우 중요한 요소입니다. 즉, 사이트에 대한 디폴트 설명이 있는 meta태그와 페이지 별 meta태그를 구분지어 정의할 수 있습니다. 2) react-helmet 사용법 2-1) 설치 npm i react-helmet-async yarn a..

1) React Query 란 ? React Query는 리액트 애플리케이션에서 서버의 데이터를 조회하거나 캐싱, 업데이트, 에러 처리와 같은 비동기 로직을 지원하는 fetching 라이브러리입니다. Server-side와 Client-side 사이에서 비동기 로직을 보다 쉽게 다루게 해주며 Server State를 관리해줍니다. 리엑트 쿼리는 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술입니다. 서버는 클라이언트에게 데이터베이스에 있는 정보를 전달해주는 역할을 하는데요, 여기서 서버는 api 서버, 클라이언트는 웹 브라우저에서 실행되는 우리가 작성한 리액트 앱을 의미합니다. DB에서 가져온 데이터를 클라이언트에서 보여주기 위해 우리는 ajax를 이용하는데요, 이 때 서버에서 ..

import { useMatch } from "react-router-dom"; import styled from "styled-components"; const Tab = styled.span` color: ${(props) => props.isActive ? props.theme.accentColor : props.theme.textColor}; `; const Coin = () => { const matchPriceTab = useMatch("/:coinId/price"); const matchChartTab = useMatch("/:coinId/chart"); return ( Price Chart ) } React-Router v5의 useRouterMatch가 v6로 넘어오면서 useMatch로..

이번 포스팅에서는 react-router-dom v6 에서 useNavigate()로 페이지를 이동하면서 파라미터를 '전달'하는 방법과 useLocation()로 파라미터를 '취득'하는 방법에 대해 알아보도록 하겠습니다. 1) 페이지 이동 시에 파라미터를 전달하는 방법 import { useNavigate } from 'react-router-dom'; export default function Test() { const navigate = useNavigate(); // 버튼 클릭시 호출 const move = () => { // 두번재 인자의 state 속성에 원하는 파라미터를 넣어준다. (id, job을 넣어봤다) navigate('/test2', { state: { id: 1, job: '개발자'..

1) useParams Hook 이란 ? The useParams hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the . Child routes inherit all params from their parent routes. useParams Hook은 와 일치하는 현재 URL에서 동적 매개변수의 key/value 쌍 객체를 반환합니다. 하위 경로는 상위 경로에서 모든 매개변수를 상속합니다. (출처 : React Router 공식 문서) 리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 React Router에서 제공하는 useParams라는 훅..