[TIL/React] 2024/04/11

✅ 코딩은 무협이다

운 좋게 참여하게 된 프로젝트에서, footer 관련 작업을 진행 중이었다. 그런데 footer 코드가 318 라인이 되는 순간 깨달음이 찾아왔다. 컴포넌트는 개나 줘버렸다는 사실을 깨달았다.

리액트는 '컴포넌트'로부터 UI를 생성하는 도구다. 이것이 리액트를 만든 대머리 아저씨들이 메인 페이지에서 주창하는 리액트의 본질이다. 그런데 이걸 몰랐냐? 또 그건 아니다. 근데 왜 컴포넌트를 안 만들었지? 그러니까 '공통 컴포넌트'의 본질이 뭐지?

✅ '공통'의 본질: '차이'

'공통' 컴포넌트를 만들기 위해서는, '차이'를 인식하는 것이 핵심이다. 잡소리는 집어치우고 바로 코드로 들어간다.

푸터에서는 위 코드처럼 나름의 section이 구분되어 있었다. red는 전체 wrapper에 공통적으로 적용된 스타일이다. blue는 인포 2와 인포 3에 공통된 내용이다. 마지막으로 green은 인포 1에만 적용된 스타일이다.

차이를 인식하니 궁금해진다. green의 내용이 과연 진짜 필요할까? green을 1)없애거나(marginTop) 또는 2)blue로 변경하면(display) 화면이 크게 달라질까?

결론: 큰 의미 없는 감성코딩의 폐해였다.

그렇다면 다음과 같은 공통 컴포넌트를 추출할 수 있겠다. 이름하야 'FooterInfoWrapper'.

그런데 green이 의미가 있었다. 역시 이유 없이 코드를 적지는 않았을 것이다. 그래서 'FooterInfoWrapper'의 최종 형태는 다음과 같다.

red와 blue, 즉 둘 이상의 컴포넌트에서 반복되는 스타일은 고정하되, green과 같은 예외사항은 sx props로 처리하겠다는 것이다.

✅ 다음 타자: 'Typography'

공통 컴포넌트의 본질은 '차이'를 인식하는 것에 있다고 말했다. Typography의 차이는 다음과 같다.

1. 마지막에 오는 Typography 요소에 대해서는 borderRight가 적용되지 않아야 한다.

2. bold 처리 + (gap: 4px) + 일반 text 형식의 요소가 있다.

1번 2번을 모두 아우르는 요소를 찾아보자

그래서 만들게 된 'FooterInfoItem'

1, 2번 요구사항을 모두 아우르는 확장성을 고려한 코드라 할 수 있겠다.

위에서 고려한 모든 사항을 footer section으로 추상화하면, 결국 코드가 103 라인이 된다. 기존보다 1/3 수준으로 추상화가 된 것이다!

✅ 회고

코드 줄이면 코딩 생활 끝나냐? 왜가 중요하다 왜.

추상화, 일반화, 확장성,,, 아 모르겠고! 유연함 때문이다. 유연함은 어디까지 뻗을 수 있느냐에 관한 얘기이다. 왜 사람들은 홍초까지 마셔가며 유연함을 추구할까? 부러지지 않기 위함이다.

코딩에서 부러짐은 error다. 확장성을 고려하지 않은 코드는 반드시 error를 조우하게 된다. 이건 내가 해봐서 안다, 진짜로. 뻣뻣한 발목은 부러지기 쉽고, 경직된 인간관계는 빠그라지기 십상이다. 코드라고 다를까, 사람이 하는 일인데. 공통 컴포넌트에 대한 깨달음으로 온 세상이 아름답게 보이는 하루다.