내가 진행했던 코드 리팩토링 과정

프론트엔드 리팩토링 이야기: styled-components, 컴포넌트화, 그리고 useMemo 와 useCallback을 활용한 최적화

프론트엔드 리팩토링에 대한 내 경험을 좀 공유해보려고 글을 쓰게 되었읍니다.
특히 styled-components를 사용해서 스타일을 어떻게 깔끔하게 관리했는지, 그리고 코드의 재사용성을 높이고 불필요한 렌더링을 줄인 방법에 대해서 얘기해보려고 합니다.

Inline-Style에서 styled-components로

먼저, 지금 현재 Habit Project의 대부분의 코드는 inline-style 방식을 많이 썼었습니다.
이 방식은 스타일을 직접적으로 컴포넌트 안에 적는 건데, 이게 왜 문제냐면, 코드가 엄청 지저분해지고, 재사용성이 떨어진다는 큰 단점이 있습니다.
그래서 현재 방식을 모두 styled-components로 전환하기로 했습니다.

// Before
<div style={{ fontSize: "14px", color: "blue" }}>Hello World!</div>

// After with styled-components
const StyledDiv = styled.div`
  font-size: 14px;
  color: blue;
`;

<StyledDiv>Hello World!</StyledDiv>

이렇게 하니까, 스타일 코드가 훨씬 깔끔해지고, 변수로 스타일을 관리할 수 있게 되어서 코드 재사용성도 엄청 올라갔다.
또한 같은 폴더 안에 styles.ts 라는 파일을 만들어서 해당 컴포넌트들을 export 할 수 있게 만들었다. 이 export 된 컴포넌트들을 본 파일에서 불러오는 방식으로 짜니, 코드의 가독성이 올라간 것을 확인할 수 있었다.

컴포넌트화와 함수화

그 다음은 반복되는 코드를 컴포넌트화/함수화 하는 작업이었습니다. 비슷한 UI가 여러 군데에서 쓰일 때마다 복붙하지 않고, 컴포넌트로 만들어서 필요할 때마다 재사용할 수 있게 만든 것. 예를 들어, 버튼이나 카드 같은 UI 요소들을 중점으로 진행했다.

// Button 컴포넌트 예시
const Button = styled.button`
  background-color: black;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
`;

<Button>Click Me!</Button>

파일 분리

그리고 코드가 어느 정도 한 덩어리라고 생각되는 부분들은 파일을 분리해서 관리했습니다. 예를 들어, 유틸 함수들이나 특정 기능을 하는 컴포넌트들을 각각 별도의 파일로 만들어서 필요할 때마다 불러와 쓸 수 있게 했습니다. 이렇게 하니까 프로젝트 구조가 훨씬 명확해지고 관리하기가 편리해졌다.
-- 모든 컴포넌트를 Home에서 관리하기 보다 -> Home=> HomeHeader => HomeBody ... 등으로 나누어 관리했습니다.

최적화: useMemo와 useCallback

마지막으로, useMemo와 useCallback을 사용해서 불필요한 렌더링을 줄였습니다. React에서 함수 컴포넌트가 리렌더링 될 때마다 함수나 객체가 새로 생성되는 걸 방지하고, 성능을 최적화하는 데 정말 중요한 요소 중 하나다.

const expensiveCalculation = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

---

결론적으로, 이런 리팩토링 과정을 거치면서 코드의 가독성, 재사용성, 그리고 성능이 확실히 개선되는 걸 경험했습니다.
물론 엄청난 양의 스파게티 코드에 처음에는 시간이 좀 걸리고 머리도 아프지만, 장기적으로 봤을 때 개발 속도와 품질이 엄청나게 향상된다는 걸 느낄 수 있을 것 입니다. 하고 있는 중인데 방 청소를 하나씩 해내가는 기분이어서 뿌듯하다 ^-^