Hook 2

useEffect와 useLayoutEffect의 차이 예제로 쉽게 이해하기

React로 개발하는 사람들에게는 useEffect는 아주 익숙한 Hook이다. 페이지 뿌려줄 data를 불러오기 위해 api call해서 data set하기도 하고 useEffect(() => { const getData = async () => { const res = await getData(); setData(res); }; getData(); }, []); store에 있는 값을 체크해 페이지 이동을 하기도 하고 useEffect(() => { if (!storeValue) { history.goBack(); } }, []); 처음 페이지가 떴을 때 스크롤의 위치를 셋팅하기도 한다. useEffect(() => { window.scrollTo({ top: 0, behavior: "auto", }..

Developer/React 2023.01.13

커스텀 훅 기본 형태 예제

React에서 제공하는 Hook들 보통 많이 쓰이는 useEffect, useCallback 같은 것들은 이미 리액트에서 재공해주는 훅이고, 커스컴 훅은 말그대로 use{블라블라} 형태로 내가 만들고 싶은 훅을 만드는 것이다. 그냥 보통 쇼핑몰 사이트만 생각했을 때, 회원가입, 로그인, 문의사항 폼이 있다고 생각해보자. 각 폼에만 해도 아이디, 이메일, 비밀번호, 내용 등의 input들이 있을 것이고 각각을 구성할 수 도 있지만, 리액트의 기본인 컴포넌트로 재사용성을 높힌 것 처럼 커스텀훅을 사용하여 공통적인 것들은 따로 분리하고 가능한 재사용할 수 있도록 하여 로직을 최소화할 수 있다는 장점이 있다. 내가 커스텀훅을 써본 적이 없다고 생각을 했는데, 생각보니 전에서 썼던 react-hook-form 이..

Developer/React 2022.01.01