👀 클린 코드 !== 짧은 코드
클린 코드를 바로 직역하면 깔끔한 코드라는 뜻이 된다.
그러나 어떤 개발자는 깔끔한 코드란 짧고 라인 수가 적은 코드라고 이해한다.
그러나 클린 코드는 짧은 코드라는 뜻이 아니다.
클린 코드는 원하는 로직을 빠르게 찾을 수 있는 코드이고, 협업하는 팀원들이 빠르게 이해하기 좋은 코드이다.
또한, 유지 보수 시간을 단축 시켜주는 코드이다.
어떻게 하면 원하는 로직을 빠르게 찾을 수 있고, 협업하는 팀원들이 빠르게 이해하기 좋으며, 유지 보수 시간을 단축 시키는 코드를 작성할 수 있을까?
👀 클린 코드를 짜기 위해서..
📌 응집도 높이기
같은 목적의 코드는 뭉쳐두자
위 코드에서 하이라이트 표시 되어있는 부분은 팝업을 띄우는 로직이다.
보다시피 각 로직들이 전부 떨어져있다.
이러한 코드는 파악도 한 번에 안되고 버그 발생의 위험도 높다.
이러한 연결된 로직은 같은 곳에 뭉쳐놔야 한다.
그렇다면, 얼마나 뭉쳐야 할까?
위 코드처럼 openPopup 함수만 사용해서 팝업을 열 수 있도록 하면 될까?
이러한 코드는 오히려 코드 파악이 어려워진다.
위 코드가 어떤 내용의 팝업을 띄우는지, 팝업에서 버튼을 눌렀을 때 어떤 액션을 하는지가 중요한 포인트인데, 이러한 포인트가 훅 하나에 가려져서 알 수 없어졌다.
당장 몰라도 되는 디테일은 뭉치고, 코드 파악에 필수적인 핵심 정보는 보여주자
핵심 데이터만 남기고 세부 구현을 숨기면 파악하기 쉬운 코드가 된다.
위 코드에서 세부 구현은 숨기고 팝업 제목, 내용, 액션은 함수 바깥에서 넘겨준다.
세부 구현은 읽지 않고 어떤 팝업인지 파악할 수 있다.
위와 같은 스타일을 선언적 프로그래밍이라고 한다.
선언적 프로그래밍
- ‘무엇’을 하는 함수인지 빠르게 이해 가능
- 세부 구현은 안쪽에 뭉쳐둬서 신경 쓸 필요가 없음
- ‘무엇’만 바꿔서 쉽게 재사용 가능
- 세부 구현을 하나하나 작성한 방식은 명령형 프로그래밍
- 그러나 선언적 프로그래밍이 무조건 좋은 것은 아니다
- 세부적으로 넘겨야하는 경우는 명령형으로 작성해야 함
📌 단일책임
하나의 일을 하는 뚜렷한 이름의 함수를 만들자
위와 같은 경우 하나의 함수에서 3가지 일을 하게 된다.
이렇게 함수 하나에서 여러 가지 일을 하게 된다면 함수의 구조 파악도 어렵고 버그도 찾기 힘들다.
다음과 같이 함수 구조를 나눠주자
📌 추상화
핵심 개념을 뽑아내자
컴포넌트 추상화
좌측 코드는 팝업 컴포넌트를 제로부터 디테일하게 구현한 것이고, 오른쪽 코드는 제출 액션과 성공 액션만 남기고 나머지는 추상화한 것이다.
함수 추상화
좌측 함수는 설계사 라벨을 얻는 코드를 세부 구현한 것이고, 우측은 중요 개념을 함수 이름에 담아 추상화한 것이다.
추상화 단계
추상화 단계에 정답은 없다.
필요한 상황에 맞춰서 추상화 단계를 결정하면 된다.
그러나 추상화 수준의 일관성은 지키자
위와 같이 서로간의 추상화 수준이 맞지 않으면 파악하기 힘든 코드가 된다.
위 코드처럼 추상화 수준을 서로 맞춰주자
