ReactHooks (Custom Hooks) 사용하기

ReactHooks (Custom Hooks)

자기가 커스텀한 hooks을 만들어 함수나 state의 추가 생성없이 간단하게 만들 수 있습니다. 

자신만의 hooks를 만들어 이전에 react의 단점들을 가볍게 보완할 수 있을 것 같습니다. 

ex) datafetch, form input 태그

주의할 점

1. 커스텀 hook의 이름은 use를 꼭 붙여주자!!

자동적으로 규칙이 맞는지 확인하지 못합니다. 특정 함수에 hook이 호출되는지 알 수 없습니다.

2. 각 input별로 같은 함수를 이용하지만 같은 state를 공유하는 것이 아닙니다.

hook은 state적인 특성을 갖고있어서 공유하지 않습니다. 완전히 독립적입니다.

 

예제 코드

import React, { useState, useEffect } from "react";

const useInputTag = defaultValue => {

const [value, setValue] = useState(defaultValue);

const onChange = e => {

const {

target: { value }

} = e;

setValue(value);

};

return { value, onChange };

};

const App = () => {

return (

<div>

<input {...useInputTag} type="password" />

<input {...useInputTag} type="email" />

<input {...useInputTag} type="name" />

</div>

);

};

export default App;

커스텀 훅스를 만들어 주어서 각 input마다 다른 함수들과 state를 안만들어 주어도 됩니다. 그리고 그 함수의 반환값을 value와 onChange를 사용하여 바로 input에 넣어주면 되는 편리함도 있습니다. 

만약 기존의 react였다면

import React, { useState, useEffect } from "react";

const useInputTag = defaultValue => {

const [value, setValue] = useState(defaultValue);

const onChange = e => {

const {

target: { value }

} = e;

setValue(value);

};

return { value, onChange };

};

const App = () => {

const [name, setName] = useState("");

return (

<div>

<input value={name} onChange={e => setName(e.target.value)} />

<input {...useInputTag} type="password" />

<input {...useInputTag} type="email" />

<input {...useInputTag} type="name" />

</div>

);

};

export default App;

첫 코드에서 새로운 input을 추가했습니다.

 input마다 state, onChange함수를 바꾸어 주기에는 귀찮은 감이 있습니다. 하지만 hook을 사용하면 말끔하게 사용할 수 있습니다. 

Customhooks를 만들어 얼마나 더 편하게 코딩을 할 수 있는지 알게 되었습니다.