Custom hook
Custom hook을 왜 사용해야 할까?
- 선언형 프로그래밍을 하기 위해서
- 코드가 간결해지고, 가독성이 높아짐
const [name,setName] =useState(null);
const [id,setId] =useState(null);
const [password,setPassword=useState(null);
const signUpHandler = ()=>{
const newOne={id,name,password}
...관련 로직이 길게 있다면
}
<input type='text' placeholder='이름을 입력하세요'/>
<button onClick={signUpHandler}>등록하기</button>
Custom hook 을 통해 변경된
signUp.jsx
--------------
const {signupHandler} =signupHook()
<input type='text' placeholder='이름을 입력하세요'/>
<button onClick={signUpHandler}>등록하기</button>
---------------------------
hooks/SignupHook.js
export signupHook=()=>{
const [name,setName] =useState(null);
const [id,setId] =useState(null);
const [password,setPassword=useState(null);
const signUpHandler = ()=>{
const newOne={id,name,password}
return [name,id,password,signUpHandler];
등을 리턴을 통해 사용하려는 컴포넌트에 전달, 이곳에는 관련 로직만 들어있다.
}
...관련 로직이 길게 있다면
}
위와 같이 우리는 state 관리 , 해당 버튼의 함수 그리고 로직을 한 컴포넌트에서 확인할 수 있다. 하지만 만약 해당 컴포넌트(화면)이 어떻게 작동하는지를 UI를 통해 직관적으로 확인할 수 있다면, 우리의 코드는 어떻게 작동하는 지를 세세하게 아는 것 보다 "큰 흐름만 직관적으로 혹은 추상적으로 알기만 하면 되는 거 아닌가"? 라는 의문을 가질 수 있을 것이다.
결국
코드의 이미지화 = 코드의 추상화를 통하여 우리가 의도하는 기능,UI를 코드로 더 분명히 하는 작업을 진행하는 것이라고 생각하게 되었다. 또한 이러한 체계는 코드의 보수,유지를 더욱더 원활하게 만들어준다.
회고
Custom hook은 hook을 하나의 컴포넌트화 한 것으로 이해 되었다. 필요한 부분만 보여주고 ,관련 로직은 하나의 hook에서 관리하는
이처럼 코드를 작성하고, 기능을 구현하고, 하는 등 체계적인 작업 역시 결국 가장 의미있는 부분만 남기고 싶다라는 우리의 의미적 욕구를 추구하려는 것을 느낄 수 있었다. 의미있는 서비스를 만들고 싶다는 생각이 한층 더 곂곂이 쌓인 시간이 되었다.
Enchanté!