Frorong

[React] 컴포넌트를 잘 설계하기 위해서 생각해야 할 것. 위 사진은 내가 진행하는 프로젝트에서 메인 화면의 UI다. view size에 따라 렌더링 하는 카드 리스트의 UI가 굉장히 상이하다. 우리 코드의 문제점은 다양한 UI를 렌더링 하는 코드에서 비롯되었다. 컴포넌트를 유연하게 사용하기 위해서 하나의 컴포넌트에서 다양한 형태의 UI를 구현하려고 했지만... 그렇게하니 코드가 더러워졌다. 아래 코드를 보자. 코드가 굉장히 더러우니 대충 읽어도 된다. 요약하자면 view size에 따라 각기 다른 UI의 슬라이더를 렌더링하고, 조작하는 코드이다. 굉장히 읽기도 어지럽고 너무 복잡하다. 이런 코드는 당장 보기도 어려울 뿐더러, 유지보수에도 최악이다. 이 블로그에서는 어떻게 아래와 같은 컴포넌트를 개선..