월드스토리의 코딩 나라

1. Custom Hooks이란?반복되는 로직을 함수로 뽑아내어, 커스텀해 사용하는 hook을 말한다.여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용한다. 이를 이용하면상태관리 로직의 재활용이 가능하고클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며함수형으로 작성하기 때문에 보다 명료하다는 장점이 있습니다. (e.g. useSomething)예시예를 들어 이런 컴포넌트가 있다. 해당 컴포넌트는 실제 React 공식 문서에 있는 컴포넌트이다. //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트function FriendStatus(props) ..

useCallback()useCallback은 useMemo와 비슷한 Hook입니다. useMemo는 특정 결괏값을 재사용할 때 사용하는 반면,  useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 함수입니다. useCallback 사용법const memoizedCallback = useCallback(function, deps); useCallback은 첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 형태의 함수 실행 조건의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해 줍니다.예를 들어 리액트 컴포넌트 안에 함수가 선언되어있을 때 이 함수는 해당 컴포넌트가 렌더링 될 때마다 새로운 함수가 생성되는데, useCallback을 사용하면 해당 컴포넌트가 렌더..

Hooks 란?클래스 컴포넌트에서만 가능했던 state(상태관리) 와 lifecycle(라이프사이클) 이 가능하도록 돕는 기능최상위 단계에서만 호출이 가능하며 반복문, 조건문, 중첩된 함수 내부에서 호출하면 됨  Hooks 대표적인 종류 useState() 상태 관리를 위한 가장 기본적인 훅 useRef() 참조(reference)를 생성하고 관리할 수 있는 훅 (DOM 접근, 변수 보존 등) useEffect() 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅 useMemo() 메모이제이션을 통해 함수의 리턴 값을 재사용할 수 있게 해주는 훅 useCallback() : 함수를 메모이제이션하여 불필요한 렌더링을 줄이게 해주는 훅 useReducer() 복잡한 컴포넌트 상태 로직을..

react-hook-form의 사용법React에서 기존 사용자입력값을 관리하려면, useRef나 useState를 이용해야했지만, React Hook Form을 이용하면 간단하게 처리할 수 있다 1. npm 패키지를 사용해 react-hook-form을 install 한다.npm install react-hook-form2. 상태관리를 위해 필요한 함수를 불러와 실행한다.register, handleSubmit, watch, formState 주요 키워드register입력 요소에 연결하기 위한 함수. 이 함수를 통해 입력 요소에 유효성 검사 규칙을 설정handleSubmit폼의 제출을 처리하기 위한 함수. 이 함수에 전달된 콜백은 유효성 검사를 통과한 데이터를 인자로 받아 실행watch특정 폼 필드의 값..