React (리액트) 커스텀 훅 사용하기 간단 예제

커스텀 훅 사용해보기

같은 기능을 하는 함수가 많다면(예를 들어 input에서 값을 가져와 사용하는)이 것을 하나의 컴포넌트로 묶어주는 것이 좋다.
이유는 함수가 달라지게 되면 모든 컴포넌트에서 해당 기능을 사용하는 곳을 찾아 일일이 수정해 줘야하는데, 하나의 컴포넌트에서 관리하게 되면 이 일을 효율적으로 처리할 수 있기 때문이다.

커스텀 훅을 작성하는 몇 규칙이 있다.

1. 변수명을 use로 시작해야한다.
2. 어찌됐던 return값은 있어야한다.
3. 하나의 컴포넌트기 때문에 똑같이 최상단의 hook을 사용 할 수 있다.

//useCompletes.js   커스텀 훅 컴포넌트
const useComplete = (initial = "") => {
const [text, setText] = React.useState(initial);

const changeText = (_ref)=>{
    setText(_ref.current.value);
     }
return [text, changeText];
}

//app.js
const [text, setText] =  useCompletes("");

//onclick 함수
onClick={() = > {
setText(input_ref);
input.current.value = "";
}}

이런 구조로 사용한다.

지금은 간단한 예제만 작성해봤지만, 컴포넌트도 하나의 함수이기 때문에 조건문 등 다양한 방법으로 값을 다룰 수 있다.

예제 설명
간단하게 작성하다 보니 생략된 부분이 많아 글로 설명을 해보자면,
onclick 함수 파일에 있는 input_ref는 Ref 훅을 사용하여 가져온 input이다.
그 값을 커스텀 훅 함수 내에 있는 changeText함수에 할당하여 값을setText로 text 값을 변경하는 과정이다.

app.js에서는 커스텀 훅에서 text와 changeText 함수를 전개구문을 통해 받게 되는데,
text는 변할 값이고 setText는 changeText 함수와 동일하다 생각하면 된다.