[TIL] useRef() / 유틸함수와 커스텀훅

라형선·2023년 4월 11일
0

useRef 로 특정 DOM 선택하기

useRef는 React Hooks의 하나로, React 함수형 컴포넌트에서 DOM 요소에 접근하거나 값을 저장하는 데 사용됩니다.

1.특정 엘리먼트의 크기를 가져와야 한다던지,
2.스크롤바 위치를 가져오거나 설정해야된다던지,
3.포커스를 설정해줘야된다던지 등 정말 다양한 상황

유틸함수

유틸 함수(utility function)는 어떤 특정한 작업을 수행하는 함수를 말합니다. 보통 코드의 중복을 줄이기 위해 사용하며, 재사용성이 높은 함수를 만들기 위해서도 사용합니다. 예를 들어, 날짜를 변환하는 함수, 문자열을 자르는 함수, 숫자를 포맷하는 함수 등이 유틸 함수의 예시입니다. 유틸 함수는 작은 단위의 기능을 수행하므로, 다른 함수나 모듈에서 여러번 재사용될 수 있습니다.

커스텀훅

커스텀 훅(custom hook)은 리액트의 훅을 사용하여, 어떤 특정한 상태 관리나 로직 처리를 하는 함수를 말합니다. 보통 컴포넌트에서 반복적으로 사용되는 코드를 훅으로 추출하여 재사용성을 높이는데 사용됩니다. 예를 들어, 특정 데이터를 가져오는 로직, 폼 데이터를 처리하는 로직, 상태를 관리하는 로직 등이 커스텀 훅으로 추출될 수 있습니다. 커스텀 훅은 리액트에서 제공하는 훅과 마찬가지로 useState, useEffect, useContext, useReducer 등을 사용하여 만들 수 있습니다. 커스텀 훅은 컴포넌트 외부에 정의되므로, 여러 컴포넌트에서 동일한 로직을 사용할 수 있습니다.

profile
형선

0개의 댓글