미니 블로그를 만들며 생긴 궁금증입니다.
지금은 그냥 전부 따라 치고 마지막에 실행해서 결과를 확인하는 방식이지만 실제로 리액트로 개발을 할 때는 css쪽은 직접 화면을 보면서 해야될텐데 만든 컴포넌트가 생각대로 구현이 되어있는지 확인을 하려면 App.js 파일에 직접 컴포넌트를 넣어서 확인해야 하나요?
페이지 컴포넌트들 같은 경우 같은 css가 중복되는데 중복되는 코드를 하나로 관리하려면 어떻게 해야할까요?
Answer 1
1
안녕하세요, 소플입니다.
1. 실제 개발할 때는 직접 컴포넌트를 렌더링 하면서 해야하는지?
네, 실제로 개발할 때는 직접 컴포넌트를 렌더링 시켜보면서 개발을 하게 됩니다.
하지만 버튼이나 체크박스 등의 작은 UI 컴포넌트들은 Storybook을 통해서 개발하고 관리하기도 합니다.
Storybook과 관련해서는 아래 링크를 참고하시기 바랍니다.
https://storybook.js.org/
2. 중복되는 CSS는 어떻게 관리해야 하는지?
스타일링 방법은 굉장히 다양하고 사람마다 선호하는 방식이 다 다릅니다.
그리고 컴포넌트 재사용성 측면에서는 스타일이 중복되는 것이 꼭 단점이라고만은 할 수 없기도 합니다.
그래서 정답은 없으며 각자 선호하는 방식을 사용하면 됩니다.
별도로 CSS 파일을 분리해서 관리할 수도 있고,
실습에서 했던 것처럼 styled-components 같은 외부 라이브러리를 사용해서 관리할 수도 있습니다.
일반적으로는 공통적으로 사용되는 스타일의 경우에는 그 부분을 별도의 컴포넌트로 만들어서 사용하고,
각 컴포넌트에 적용되는 스타일은 해당 컴포넌트의 스타일로 적용합니다.
여러가지 방법으로 스타일링을 해보시는 경험을 쌓으시면 개발하는데 도움이 되실 겁니다😀
감사합니다.
강의가 삭제되었다고 합니다
0
106
1
이거 왜 존재하지 않는다고 뜨는건가요
0
133
1
존재하지 않는 수업이라고 떠요
0
183
1
안드로이드 에뮬레이터 오류
0
100
1
교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.
0
125
1
prevIsConfiromed 질문
1
141
2
chapter14 잘이해가 되지않습니다..
1
135
2
2025년 3월 리액트버전
1
202
2
npm 설치 오류
1
175
1
chapter_07 콘솔로그 질문드려요~!
1
127
2
안녕하세요 미니블로그 실습 질문드립니다.
1
178
3
에러가 떠요
1
218
3
Chapter6 질문 드립니다
1
209
2
실습 코드 있을까요?
1
206
2
상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.
1
233
2
npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다
0
308
3
이름과 코멘트 줄바꿈이 안 됩니다.
0
140
1
버튼이 안 뜹니다
0
303
2
npx create-react-app my-app
1
470
2
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
1
376
3
Chapter_05 터미널, 리액트 에러
0
193
2
npx create-react-app my-app 명령어 반응없음
1
432
3
import 코드 에러
1
214
1
백틱
1
121
1