# custom hook
데이터 가져오기 전까지 로딩 띄우는 useLoading 커스텀 훅 만들기 (TypeScript)
데이터를 가져올 때 로딩을 띄우고 싶다면 React Hook의 useState를 활용해서 사용할 수 있다. 로딩 상태값을 만들어서 데이터를 가져오기전까지 로딩을 띄우고, 다 가져왔으면 로딩을 없애주는 로직을 useState 훅을 사용하여 많이 사용해 왔을 것이다.
인증 로직 주입은 어디서 해야할까?(feat.횡단관심사분리)
인증이 필요한 특정 핸들러에 어떻게 인증로직을 주입해줄 수 있을까? react-hook-form 라이브러리를 뜯어보며 알아보자!
(SEB_FE) Section4 Unit3 React Hooks
함수 컴포넌트와 클래스 컴포넌트의 차이를 학습하고, 함수 컴포넌트에서 Hook을 사용하는 이유를 이해합니다.Hook의 사용 규칙에 대해 학습하고 이해합니다.useMemo의 쓰임새와 작성 방법에 대해 학습합니다.useCallback의 쓰임새와 작성 방법에 대해 학습합니다
Custom hook
Custom hook은 React에서 사용되는 함수이다. React의 기본 훅인 useState, useEffect, useContext 등과 마찬가지로, Custom hook은 use라는 접두사로 시작해야한다. 이는 React가 이 함수가 훅으로 사용되는 것을 인식할
Custom hook
커스텀훅이란?로직을 재사용하기 위한 방법 중 하나. useState, useEffect 등 리액트 내장 훅을 사용하여 공통된 로직이나 기능을 별도로 분리한 훅.기능은 동일하게 작동하되 중복 코드가 사라지고 전체적인 코드량 감소.파일의 이름 앞에 반드시 use라는 키워드
Pagination Custom Hook 구현
모행은 여행지 정보와 코스에 대한 정보를 주는 정보성 짙은 여행 플랫폼이었기에 페이지네이션이 사용되는 부분이 많았습니다. 해당 페이지네이션을 커스텀 훅으로 구현해 쓸 수 있다면 편리할 것 같아 직접 커스텀 훅으로 구현해보고자 했습니다.모행은 여행지 정보와 코스에 대한
미사일마켓 :: 폴더 구조 선정
기존의 개인 포트폴리오를 리팩토링하려고 했으나전체적인 UI도 변경하기위해 새로 만들기로 하였다.중고 마켓과 자유게시판이 함께 있는 중고 마켓 커뮤니티를 만드려고 한다.자유게시판 관련 파일은 container/presentational 패턴을 사용하고,중고 마켓 관련 파
한 주의 정리 - WIL
이번주(2월 20일 ~ 2월 26일)은 리액트 심화부터 백엔드와 프론트가 만나 처음 서로의 언어로 토이 프로잭트를 만드는 날이었다.1\. 리덕스 청크는 리덕스에서 많이 사용하고 있는 미들웨어중에 하나이다. thunk를 사용하면 dispatch를 할때 객체가 아닌 함수
리액트 - Custom hook
2월 26일 여정 49일차이다.오늘은 Custom hook이라는 것에 대해 간단하게 기록하려고 한다.Custom hook이라는 것은 무엇일까?먼저 간단한 아래의 예제 코드를 보자.위의 코드를 보면은 input의 개수가 증가하면 useState와 이벤트핸들러도 같이 증가
[프로솔브 리팩터링] Custom Hook을 이용해 컴포넌트의 UI와 비즈니스 로직 분리
프로솔브를 리팩터링하면서 Custom Hook을 이용해 UI와 비즈니스 로직들을 분리한 경험에 대해 다룹니다.
antd로 화면 만들기-_app.js와 Head, 로그인 폼, 리렌더링 이해하기, 프로필 페이지와 회원가입 페이지 만들기(custom hook)
ant design ( css framework )아이콘을 바로 가져다 쓸 수 있음보통 고객이 있는 서비스에서는 잘 안씀 → why? 개성이 사라짐 (admin 느낌)혼자 개발하는 경우 → 디자이너 없이도 그럴듯하게 디자인 가능css 입히기styled-component
[React] 로그인/회원가입 리팩토링
현재 로그인 / 회원가입 페이지의 경우 <User /> 라는 컴포넌트 하나로 관리되고 있고라우팅에 따라 다른 화면이 나타나도록 구현되어 있었다.그리고 크게 3개의 기능으로 이루어져 있는데인풋값 핸들링유효성 검사 서버와의 통신이다. 위의 기능을 포함한채 <Us