-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
미니 블로그를 만들며 생긴 궁금증입니다.
24.02.06 03:49 작성 24.02.06 03:53 수정 조회수 236
1
지금은 그냥 전부 따라 치고 마지막에 실행해서 결과를 확인하는 방식이지만 실제로 리액트로 개발을 할 때는 css쪽은 직접 화면을 보면서 해야될텐데 만든 컴포넌트가 생각대로 구현이 되어있는지 확인을 하려면 App.js 파일에 직접 컴포넌트를 넣어서 확인해야 하나요?
페이지 컴포넌트들 같은 경우 같은 css가 중복되는데 중복되는 코드를 하나로 관리하려면 어떻게 해야할까요?
답변을 작성해보세요.
1
Inje Lee (소플)
지식공유자2024.02.06
안녕하세요, 소플입니다.
1. 실제 개발할 때는 직접 컴포넌트를 렌더링 하면서 해야하는지?
네, 실제로 개발할 때는 직접 컴포넌트를 렌더링 시켜보면서 개발을 하게 됩니다.
하지만 버튼이나 체크박스 등의 작은 UI 컴포넌트들은 Storybook을 통해서 개발하고 관리하기도 합니다.
Storybook과 관련해서는 아래 링크를 참고하시기 바랍니다.
https://storybook.js.org/
2. 중복되는 CSS는 어떻게 관리해야 하는지?
스타일링 방법은 굉장히 다양하고 사람마다 선호하는 방식이 다 다릅니다.
그리고 컴포넌트 재사용성 측면에서는 스타일이 중복되는 것이 꼭 단점이라고만은 할 수 없기도 합니다.
그래서 정답은 없으며 각자 선호하는 방식을 사용하면 됩니다.
별도로 CSS 파일을 분리해서 관리할 수도 있고,
실습에서 했던 것처럼 styled-components 같은 외부 라이브러리를 사용해서 관리할 수도 있습니다.
일반적으로는 공통적으로 사용되는 스타일의 경우에는 그 부분을 별도의 컴포넌트로 만들어서 사용하고,
각 컴포넌트에 적용되는 스타일은 해당 컴포넌트의 스타일로 적용합니다.
여러가지 방법으로 스타일링을 해보시는 경험을 쌓으시면 개발하는데 도움이 되실 겁니다😀
감사합니다.
답변 1