Hook ?
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다.
나만의 Hook 만들기
개발을 하다 보면 가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, higher-order components와 render props가 바로 그것입니다. Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다.
각 컴포넌트의 state는 완전히 독립적입니다. Hook은 state 그 자체가 아니라, 상태 관련 로직을 재사용하는 방법입니다. 실제로 각각의 Hook 호출은 완전히 독립된 state를 가집니다. 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있습니다.
Custom Hook은 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 ”use“로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. useSomething이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 해줍니다.
폼 핸들링, 애니메이션, 선언적 구독(declarative subscriptions), 타이머 등 많은 경우에 custom Hook을 사용할 수 있습니다. 우리는 React 커뮤니티에서 어떤 custom Hook이 만들어질지 정말 기대됩니다.
useInput
const useInput = initialValue => {
const [value, setValue] = useState(initialValue);
const onChange = event => {
console.log(event.target)'
};
return { value, onChange };
};
const App = () => {
const name = useInput("Mr.");
return (
<div>
<h1>Hello</h1>
// <input
// placeholder="Name"
// value={name.value}
// onChange={name.onChange}
// />
// {...name} 을 사용하여 코드를 줄일 수 있다.
<input placeholder="Name" {...name} />
</div>
);
};
export default App;
value={name.value}, onChange={name.onChange} 를 대체하여{...name} 을 사용할 수 있다. name 안에 있는 것들을 모두 풀어준다.
+ 유효성 검증 기능 추가
특정 문자를 사용할 수 없게 하기 위하여 유효성 검증 기능을 추가해보자.
const useInput = (initialValue, validator) => {
const [value, setValue] = useState(initialValue);
const onChange = event => {
const {
target: { value }
} = event;
let willUpdate = true;
if (typeof validator === 'function') {
willUpdate = validator(value);
}
if (willUpdate) {
setValue(value);
}
};
return { value, onChange };
};
const App = () => {
const maxLen = (value) => value.length < 10;
const name = useInput("Mr.", maxLen);
return (
<div>
<h1>Hello</h1>
<input placeholder="Name" {...name} />
</div>
);
};
export default App;
name을 사용해서 useInput에 'Mr', maxLen을 넣어주었다.
매번 validator는 바뀔 것이다. validator 의 type 이 function 일 때, willUpdate에 validator의 결과를 업로드 할 것이다.
위의 코드에서 validator의는 maxLen 이고, 결과는 True 이거나 False 이다.
만약, true일 때 화면에 Input의 value를 업데이트 하겠다는 의미이다.
REFERENCE
