LightHouse에 이어 클린코드를 적용해보자

🔍 클린코드를 시작하게 된 이유

 

이전에 포스팅했던 LightHouse 사용 이후 코드 개선도 필요하다고 느꼈습니다.

학부시절 부터 '클린코드' 라는 말을 어깨 너머 많이 들었었는데요.

정작 주어진 과제 및 프로젝트 구현에만 급급했던 나머지 찾아보려고 노력하진 않았던 것 같습니다.

 

그러다

 

https://youtu.be/edWbHp_k_9Y 

[SLASH 21] 실무에서 바로쓰는 Frontend Clean Code : Toss 진유림 개발자

 

진유림 개발자님의 유투브 영상을 보고 애초에 클린코드 자체를 잘 못 이해하고 있었다는걸 알게 되었습니다.

 

클린코드란?

아마 저처럼 클린코드가 그저 짧고 두 세번 반복되지 않는 함수형 코드 정도로만 이해하고 계신 신입 분들이 많을 것 같습니다. 저 또한 당장 최근까지도 정확히 몰랐었거든요ㅎㅎ.

 

위 영상의 내용을 간략하게 표현해보면

클린코드가 가진 의의는 유지보수 시간의 단축 이라고 볼 수 있다고 합니다.

 

클린코드가 적용되지 않은 코드는 주로 1. 흐름파악이 어렵고 2. 도메인 맥락 파악이 안되며 3. 동료에게 물어봐야만 알 수 있는 코드 입니다.

따라서 클린코드는 누가 보더라도 부가 설명없이 동작을 이해할 수 있어야 합니다.

가령 코드의 길이가 더 길어지더라도 말이지요!

 

이후 영상에서는 원하는 로직을 빠르게 찾기 위한 몇 가지 개념들을 짚어줍니다.

 

1. 응집도 2. 단일 책임 3. 추상화 입니다.

 

저는 이 중에서 먼저 '응집도' 에 대해 이야기 해보겠습니다.

 

응집도란?

"하나의 목적을 가진 코드들은 최대한 뭉쳐져 있어야 한다."

코드 블록에서 서로 비슷한 역할을 하는 코드를 가까이 붙이면 해당 로직을 파악하기 위한 코드의 규모가 눈에 들어오고 유지보수하기 쉬워집니다.

 

또 코드의 필수적인 핵심 부분과 세부적인 부분을 나누어 세부적인 부분은 필요하다면 찾아볼 수 있게 숨긴다면 코드의 가독성에 더욱 도움이 됩니다.

* 특정 코드 블록을 숨김으로써 코드를 이해하는데 방해가 된다면 그것은 핵심 부분이라고 보아야 합니다.

 

저는 이를 제 개인 포트폴리오 코드에 적용해 보았는데요.

 

클릭시 Modal 실행

 

해당 화면의 Card를 클릭하면 Modal이 실행되게 되는 구조입니다.

 

저는 해당 로직을 구현하는 코드를 아래와 같이 작성해보았는데요.

 

  const { modalShow, toggle } = useModalHook();

  return (
    <>
      <Modal
        modalShow={modalShow}
        toggle={toggle}
      ></Modal>

      <CardContainer onClick={toggle}>
    </>
 )

 

정말 간단하게 Modal을 On/Off 하는 함수와 On/Off 상태를 가진 변수만 커스텀 훅을 통해 숨겼습니다.

 

더 많은 기능이 필요한 경우에도 해당 로직에 큰 핵심이 아니라면 숨길 수 있을 것 같습니다.

 

 

import { useState } from "react";

const useModalHook = () => {
  const [modalShow, setModalShow] = useState<boolean>(false);

  const toggle = () => {
    setModalShow(!modalShow);
  };

  return {
    modalShow,
    toggle,
  };
};

export default useModalHook;

이렇게 커스텀 훅을 이용해 modalShow 와 toggle 의 세부 코드를 모르더라도 충분히 모달의 상태를 저장하는 것과 그 상태를 변경하는 함수 라는 것을 인지할 수 있습니다.

 

이러한 방식은 선언형 프로그래밍이라고도 합니다. 이의 반대로는 명령형 프로그래밍이 있습니다.

 

마지막으로 앞서 기술한 내용처럼 선언형 프로그래밍은 코드의 가독성과 유지보수 및 재사용성에 용이하다는 점이 장점이 있지만 반대로 로직을 변경하기 위해선 여러 레벨을 오가며 수정해야 할 수도 있습니다.

따라서 현재의 상황에 맞게 유동적으로 사용하는 것이 좋다고 합니다.