# custom hook
Form, Custom Hook 만들기
브라우저는 폼을 다루기 위한 내장 API를 가지고 있다. 브라우저의 내장 API는 웹 개발 요구사항에 따라 한계를 가진다. 커스텀 오류 메세지를 보여준다거나 폼을 제출하기 하기 전에 입력값을 검증하는 등의 행위는 내장 API만으로는 구현이 까다롭다.폼을 제출할 때 요구
[TIL] React 심화
React는 DOM의 사본인 Virtual-DOM 을 가지고 있다. 이는 Real-DOM이 동적 UI에 최적화된 Interface가 아니라는 약점을 극복하기 위함이다.예를 들어서, 모던웹은 사용자에게 동적인 UI를 제공하고 개발자는 이를 구현하기 위해 DOM을 통해 X
[React] 커스텀 훅 사용하기 (useFetch, useInput)
공식 문서(https://ko.reactjs.org/docs/hooks-reference.html클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능 (= c
[CustomHook]useTab
useTabs에 초기값 0과 content(데이터)를 넘겨줌.커스텀훅에서는 유효성 검사.커스텀훅은 초기값에 해당하는 데이터와 데이터를 선택하는 스테이트 변경함수를 넘겨줌컴포넌트에서는 버튼을 클릭하면 해당 인덱스 값을 changeItem에 넘겨주고 즉 커스텀훅의 setC
[CustomHook]useInput
variable shadowing 참고<a href="https://www.techiediaries.com/react-spread-operator-props-setstate/value = {name.value} onChange = {name.onChang
[CustomHook]fetch, lockScroll, outsideClick
모달 창 활성화 시 마우스 스크롤로 인해서 모달창 뒤의 UI의 움직임을 방지useLayoutEffect :리액트 내장 훅으로 렌더링 후 실행되는 useEffect와 달리 렌더링 되기 전에 동작하는 훅.useLayoutEffect 내에서 body의 스타일이 overflo
[React]Custom Hook
Hook 등장 이전React의 관심사로직- API 호출, state변경, 이벤트 핸들링 등UI - JSXPresentational - Container 퍁ㄴ로직을 담당하는 컴포넌트(Container)와 UI를 담당하는 컴포넌트(Presentational)를 분리해서 관
[React] 관심사의 분리
개발자가 자주 맞이하는 고민 중 하나는 아무리 코드를 잘 짜도 다양한 이유로 지금까지의 코드를 변경해야할 상황이 발생하는 것에서 비롯된다. 이 고민을 해소하려면 어떡해야할까?관심사의 분리(SoC: Seperatio of Concerns): 각각의 관심사에 따라 코드를
useRef와 커스텀 훅을 활용하여 모달창 외부 클릭 시, 모달창 닫기 기능 구현
useRef 사용방법 >>useRef()를 이용해서 Ref객체를 만들어준 후, 이 객체를 특정 DOM에 Ref값으로 설정합니다. 이렇게 되면 Ref 객체의 current값이 특정 DOM을 가르키게 됩니다. >DOM을 직접 선택해야 하는 경우들 >>- 엘리먼트 크기를
useDebounce 커스텀 훅 만들기
debounce function은 사용자가 미리 결정한 시간 동안 타이핑을 멈출 때 까지 keyup이벤트의 처리를 지연시킵니다. debounce처리를 해주면 UI 코드가 모든 이벤트를 처리할 필요가 없고, 서버로 전송되는 API 호출 수도 크게 줄어듭니다. 입력된 모든
[NEXT JS] Custom hook? 코드 리팩토링
custom hook은 반복되는 로직을 재사용하는 방법으로 꼭 함수명을 use로 시작하고, 그 안에 함수를 작성한다.그 안에 useState, useEffect, useReducer, useCallback 등 Hooks를 사용하여 원하는 기능을 구현한다.다른 페이지에서
[개발자되기: React 심화2] Day-52
함수 이름 앞에 use 붙이기프로젝트 내 hooks 디렉토리에 Custom Hook 위치시키기return 하는 값은 조건부이면 안됨React 18 버전에서는 더이상 ReactDOM.render를 지원하지 않음React 18에서는 이제 createRoot API를 사용함
React Custom Hook
Custom Hook은 API 호출과 직접 연관이 있는 건 아니지만, API 호출을 효과적으로 하는 방법들을 이해하기 위해서는 선행으로 Custom Hook이 어떤건지 이해하고 있어야 한다. 여러 개의 컴포넌트에서 공통적으로 해야하는 작업이 있을 경우 사용한다. ex
Hook&Context
Hooks are a new addition in React 16.8npx create-react-app react-hooks-ex컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려움컨테이너 방식 말고, 상태와 관련된 로직복잡한 컴포넌트들은 이해하기 어려움Class
React-Hooks
함수형 컴포넌트가 클래스형 컴포넌트보다 훨씬 간단합니다. 하지만, 함수형 컴포넌트 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없습니다. 그래서 React 에서 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 도구를 만들어 주었
[TIL] 0626 | React with Redux, Next.js, TypeScript
✍🏻 0626 | React with Redux, Next.js, TypeScript ✓ 사용자 정의 훅 재사용하기 ✓ 사용자 정의 훅 연습하기
[TIL] 0614 | React with Redux, Next.js, TypeScript
✍🏻 0614 | React with Redux, Next.js, TypeScript ✓ 커스텀 훅이란 무엇인가 ✓ 커스텀 리액트 컴포넌트 ReEvaluation Hook 함수 생성하기 ✓ 사용자 정의 훅 사용하기 ✓ 사용자 정의 훅 구성하기
React Custom Hooks: useFetch()
컴포넌트를 만들다 보면 반복되는 로직이 자주 발생된다. 따라서 custom hooks를 만들어서 반복되는 로직을 쉽게 재활용 할 수 있다.Custom Hooks는 "use"라는 단어로 시작한다. (ex: useFetch)기존에 사용했던 fetch는 아래처럼 모든 com
Axios Interceptor에서 Hook을 사용하는 방법
프로젝트를 진행하면서 Axios Interceptor에서 React Hook 및 Custom Hook을 사용하기 위해 고민했던 과정을 소개합니다.