[React] 11. React에서 클린코드 구현하기

 

1. 클린코드의 의의

다른 사람의코드를 수정해야 할 때 작성자만 이해할 수 있고 다른 사람은 무슨 기능을 하는 코드인지 파악하기 어렵다.

흐름파악이 어렵고

도메인 맥락 표현 x 

작성자만 알 수 있는 코드

개발할 때 병목, 유지보수시간 오래, 기능추가 불가능한 상태, 성능도 떨어짐

 

클린코드의 의미 === 유지 보수 시간의 단축

시간은 자원이고 돈이다. 고치는데 더 빠른 시간이 걸릴수록 돈을 아끼는 것이다.

 

모두 처음엔 클린했다. 하지만 기능을 추가하는 상황이라면 순식간에 들쑥날쑥해질 수 있다.

사실 당연하다. 남이 짠 코드에 내 기능을 추가하는 것이니....

이미 작성된 코드에 새 기능을 추가한다고 해보자........

....

 

코드 ...

 

하지만 나쁜코드가됨

하나의 목적인 코드가 흩뿌려져 있다.

하나의 함수가 여러가지 일을 하고 있다.

함수의 세구 부현 단계가 제각각이다.

작은 기능 하나를 추가했더니 어지러운 코드가되었다.....PR에서보면 몰랐겠지만 전체 그림으로 보면 엉망이다.

 

코드 리팩토링

 

1. 함수의 세부 구현 단계 통일 - 위계 맞추기, 하나의 함수에 하나의 기능만 넣기

2. 흩어진 코드 하나로 뭉치기

3. 함수에 하나의 일만 하게 하기

클린코드 !== 짧은 코드 == 원하는 로직을 빠르게 찾을 수 있는 코드

응집도: 하나의 목적을 가진 코드가 흩뿌려져 있다.

단일 책임: 함수가 여러 가지 일을 하고 있다.

추상화: 함수의 세부 구현 단계가 제각각이다. - 핵심 개념만 노출해서 추상화 단계를 필요한 부분만 노출!

하지만 다시문제가 생겼다.. 한 군데로 뭉쳤는데 오히려 파악이 어려워짐.... 어떤 액션을 하는지가 훅 속에 가려져서 알 숭 없게 되었다..... 보기 더러울 때 일단 뭉쳐두는 것....... 뭉처서 숨긴다고 클린코드가 되지 않는다.

그럼 무엇을 뭉처야 할까?

당장 몰라도 되는 디테일

무엇을 보여줄까?

코드 파악에 필수적인 핵심 정

 

1. 핵심 데이터와 세부 구현을 나눈다.

세부 구현만 숨겨놓고 핵심 데이터는 바깥에서 넘기는 것이다. 세부 구현을 읽지 않고도 어떤 함인지 한눈에 알 수 있다.

무엇을 하는 함수인지 빠르게 알 수 있다.

세부 구현은 안쪽에 뭉쳐두어 신경쓸 필요가 없다.

기능만 바꿔 재사용가능

 

명령형 프로그래밍 vs 선언적 프로그래밍

명령: 

선언:

1두 가지를 상황에 맞춰서 써야 한다.

리액트의 JSX문법을 사용하다 보면 HTML에서도 선언적 프로그래밍을 할 수 있지만 프롭으로 어떻게 해야할지 세부적으로 넘기는 경우에는 명령형 설계도 필요하다.

2단일 책임

하나의 일을 하는 뚜렸한 이름의 함수를 만들자

함수 말고도 리액트 컴포넌트로 기능을 분리(함수형 프로그래밍의 일종) - 기능성 컴포넌트

이름 짓기가 복잡하면 한글 변수명도 써보자(주석과 같은 효과)

3추상화

로직에서 핵심 개념들을 뽑아내는 것

정답은 없다. 상황에 따라 필요한 부분만 추상화하면 된다.

추상화 시 주의사항: 추상화 단계가 섞여있다면 오히려 코드파악이 어려워짐.  추상화 단계를 맞춰주자.

4액션아이템

기존 구조를 뜯어봐야 한다.

큰 그림 보는 연습하기

팀과 함께 공감대 형성, 규약 맞추기 각자 문제라고 생각하는 지점 가져와서 공유하기

문서로 적어보기...: 모호한 개념이므로 글로 적어야 명확해진다.

토스코어의 진유림님 감사합니다.

 

 

 

 

 

 

https://velog.io/@kandy1002/Frontend-Clean-Code

Frontend Clean Code

토스  SLASH 21에서 React 클린 코드에 대한 강연 내용이 있어 참고하고 정리하려고 한다.