Skip to content

스타일링 상태관리 방식 선정 이유

afds4567 edited this page Aug 17, 2023 · 1 revision
  • 스타일링 => Styled-Component

    • 스타일 유지보수의 용이함: Styled-Components는 컴포넌트와 관련된 스타일을 함께 정의하기 때문에, 스타일과 컴포넌트 간의 응집도가 높아집니다. 이로 인해 코드 베이스가 선명하게 유지되며, 스타일 변경 시 해당 스타일을 사용하는 컴포넌트를 쉽게 찾아 수정할 수 있습니다.
    • 컴포넌트 상태와 스타일 결합: Styled-Components는 컴포넌트의 상태와 함께 작동하여 상태에 따라 스타일을 동적으로 변경할 수 있습니다. 이로 인해 상태 변화에 따라 스타일이 자동으로 업데이트되므로, 프론트엔드 로직과 스타일링을 더욱 밀접하게 통합할 수 있습니다
    • 컴포넌트 스타일 캡슐화: Styled-Components를 사용하면 스타일이 각 컴포넌트 내부에 캡슐화되므로, 스타일 간의 충돌을 최소화할 수 있습니다. 이를 통해 전역 스타일 오염(global style pollution) 문제를 방지하며, 컴포넌트 간 독립적인 스타일링을 보장할 수 있습니다.
    • 동적 스타일링의 간편함: Styled-Components는 JavaScript 문법을 사용하여 동적으로 스타일을 설정할 수 있습니다. 이는 프론트엔드에서 상태에 따라 스타일을 변경해야 할 때 유용합니다. 예를 들어, 조건부 렌더링이나 테마(theme)에 따라 스타일을 동적으로 적용할 수 있습니다.
    • 모든 팀원들이 가장 많이 사용해본 기술이기에 학습에 소요되는 시간을 단축할 수 있습니다.
  • 상태관리 => 별도의 라이브러리를 사용하지않고 ContextApi를 사용합니다. 추후 고도화시 여러 라이브러리의 장점을 비교해서 적용예정입니다.