230102 TIL

요즘 TIL 쓰는것도, WIL 쓰는것도 너무너무 하기 싫어져서 소홀히 한 것 같다.
새해니까 리마인드해서 지금부터라도 다시 열심히 써보자!

커스텀 훅과 Declarative

오늘은 커스텀 훅을 배웠다.

커스텀 훅은 생각보다 훠어어어얼씬 내 컴포넌트를 간결하게 볼 수 있도록 해주었다. 이를 declarative 하게 코드를 짰다고 한다.

명령형 프로그래밍 imperative programming

커스텀 훅 등을 통해 나의 코드를 간결하게 만들어주기 전 상태, 그러니까 어떤식으로 함수나 코드가 동작하는지 보여지는 것을 명령형 프로그래밍이다.

예시를 들어보자면,
"무릎 땅에 닿게 해 -> 무릎 접어 -> 그대로 발 뒤꿈치 위에 앉아"
라고 말하는 것

선언형 프로그래밍 declarative programming

커스텀 훅 등을 통해 나의 코드를 간결하게 만들어 준 방법이 바로 선언형 프로그래밍이다.
어떤 input 을 넣으면 바로 output 이 나오도록 하는..

예시를 들어보자면,
"꿇어"
라고 말하는 것

예시코드

최초에 나는 코드를 이런식으로 짰다.

---

• js

  const dispatch = useDispatch();

  const todoTitleRef = useRef();

  const handleAddClick = (e) => {
    dispatch(postTodoList(todoTitleRef.current.value));
  };

---

• html

    <InputTodoContainer>
      <StyledInput ref={todoTitleRef} />
      <StyledButton
        onClick={(e) => {
          handleAddClick(e);
        }}
      >
        추가하기
      </StyledButton>
    </InputTodoContainer>

---

위 코드를 보면, 쓸데없이 InputTodo 라는 함수가 어디서 재료를 가지고 와서 어떻게 재료를 손질하고 요리를 내놓는지 모두 적혀있다.
( 사실 진짜 쓸데없나? 라고 생각하면.. 음... 굳이 커스텀 훅을 통해 declarative 하게 코드를 짤 수 있는데 굳이? 라는 생각이 들기는 한다. )

지금은 굉장히 적은 양의 코드지만 이게 몇 백, 몇 천줄의 코드라면?
상상만해도 끔찍하다.
( 코드가 모두 이런식이라면 디버깅하기 굉장히 힘들 것으로 예상된다. )

그래서 우리는 커스텀 훅을 통해 위 코드를 리팩토링 해보겠다.

---

• js

  const { todoItemValue, onChange, addTodo } = useAddTodo();

---

• html

    <InputTodoContainer>
      <StyledInput value={todoItemValue} onChange={onChange} />
      <StyledButton onClick={addTodo}>추가하기</StyledButton>
    </InputTodoContainer>

---

엥?? 이렇게나 짧아진다고?
이것이 커스텀 훅의 힘이다..

1. 우리가 만든 useAddTodo() 라는 녀석을 통해
2. {todoItemValue, onChange, addTodo} 이 세 가지만 잘 넣어주면,
3. AddTodo 라는 로직이 동작하게 되는 것이다.

커스텀 훅이 얼마나 매력적인 녀석인지 이제 충분히 알아보았다면, 이제 커스텀 훅을 어떻게 짰는지 안을 들여다 보도록 하자.

---

• custom hook (js)

const useAddTodo = () => {
  const [todoItemValue, setTodoItem] = useState("");
  const dispatch = useDispatch();

  const onChange = (e) => {
    setTodoItem(e.target.value);
  };

  const addTodo = () => {
    dispatch(postTodoList(todoItemValue));
  };

  return { todoItemValue, onChange, addTodo };
};

export default useAddTodo;

---

커스텀 훅 안에서는 이런 일들이 일어나고 있었다 . . .
최초의 코드 로직이 이 안에 담기고, 그 결과를 뱉어낸다.
그런데 그건 사실 우리에게 중요하지 않다.

마치 우리가 코딩을 하기 위해 키보드를 두드리는데, 이 키보드가 어떻게 작동하는지는 중요하지 않고, 어떻게 쓰는건지만 알고 있으면 되는 것 처럼 . . .

오늘은 이렇게 커스텀 훅에 대해서 배웠고 너무나도 큰 매력을 느꼈다.
이번 프로젝트를 진행할 때 시간적 여유가 된다면 꼭 사용해보고 싶은 욕심이 생긴다.

그나저나 나 선발대 수업.. 괜찮겠지?