🌈 React UI Design

UI&Component Design

요즘 블로그 프로젝트를 진행하고 있다.
프로젝트를 진행하며 리팩토링을 하다보니 UI를 처음부터 디자인 하는 방법을 내 나름대로 정해놓으면 나중에 리팩토링할 일이 줄어들겠다는 생각을 하였다.

그래서 UI Component를 Design할 때 고려해야할 사항을 내 나름대로 정리해보았다.

1. 컴포넌트를 적절하게 구분하였는가

2. 컴포넌트의 각 element들이 적절하게 구성되어있는가?

3. styling은 어떤 도구를 선택할 것인가?

4. styled-component를 구분하는 것이 좋지 않을까?

5. UI를 보여주는 component가 깔끔하게 유지되고 있는가?

---

1. 컴포넌트를 적절하게 구분하였는가?

처음 UI설계시 컴포넌트를 적절하게 구분하는 것이 중요하다고 생각이 들었다. 이것은 리액트 컴포넌트의 기본 사항이니 UI를 설계할 때 항상 고려하고 컴포넌트를 구성해야겠다.

또한 redux를 사용하고 있다면 필요에 따라 Container Component(상태관리를 해주는 컴포넌트)를 만들어주자.

2. 컴포넌트의 각 element들이 적절하게 구성되어있는가?

여러 컴포넌트로 설계를 한 뒤에 각 컴포넌트의 element들을 어떻게 구성할 것인지도 중요한 것 같다.

불필요하게 element들이 있지 않은지, 또한 필요한 element들이 없는지 이러한 부분들은 사전에 생각하고 컴포넌트를 구성하는 것이 중요한 것 같다.

물론 나중에 리팩토링할 때 수정하면 되겠지만 처음 구성할 때도 생각을 하고 설계하면 추후에 리팩토링을 할 때에 편할 것 같다.

3. styling은 어떤 도구를 선택할 것인가?

컴포넌트를 styling할 때, 여러 가지 styling 방법을 선택할 수 있다.
original하게 css로 해도 되며, sass,styled-component를 사용해도 된다.

방법은 여러 가지가 있을 수 있겠지만 현재까지는 나는 styled-Component를 선호하는 편이다.

이유는 컴포넌트의 element에 className이 덕지덕지 붙어있는 것이 깔끔해 보이지 않다는 생각이 들었다.

또한 styled-Component는 같거나 비슷한 스타일링 요소들을 적절히 재사용할 수 있기 때문에 이 점이 장점이라고 생각한다.

물론 이건 아직까지 내 취향이기때문에 추후에는 어떨지 모르겠다.
어쨋든 지금은 styling 방법으로 styled-component를 선호하고 있다.

4. styled-component를 구분하는 것이 좋지 않을까?

리팩토링할 때 컴포넌트를 보니 styled-component를 사용하게 되면 하나의 컴포넌트를 구성할 때 코드가 굉장히 번잡해보이는 것을 발견할 수 있었다.

보는 이에 따라 다를 수 있겠지만 나는 이를 분리하는 것이 더 유지보수측면과 가독성에 좋다고 생각이 들어 각 컴포넌트별로 styling 파일을 구분지어 놓는 것이 좋은 방법일 것이라는 생각이 들었다.

5. UI를 보여주는 component가 깔끔하게 유지되고 있는가?

이 사항은 redux와 같이 사용할 때 특히 고려할 사항이라고 생각이 들었다.
redux를 사용할 경우 보통 UI Component(UI를 보여주는 컴포넌트)와 Container component(상태 관리를 하는 컴포넌트)로 나눈다.

이 때 UI 컴포넌트는 최대한 깔끔하게 유지하는 것이 좋다는 생각이 들었다. 때문에 할 수 있는 작업들을 Container component에서 구현해서 UI Component로 넘겨주는 것이 좋다고 생각한다.

---

정리

위 사항들은 내가 프로젝트를 만들며 고려해야할 사항이라고 생각하여 정리해놓은 것이고 나의 취향이므로 맞는 방법이 아닐 수도 있겠지만 추후에 UI를 설계할 때 다시 되새겨보며 본 포스팅을 참조하여 디자인을 해봐야겠다.

위 사항들이 맞는 방법은 아닐 수 있겠지만 일단 프로젝트를 처음 디자인할 때 무작정 코드부터 작성하다기보다는 나름의 설계를 하여 UI, Component 등 여러가지 사항을 정리하여 설계하는 것이 중요하다는 생각이 들었다.