UI 재사용성 질문
export const Row = styled.div`
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 0 24px;
margin: 8px 0;
`; <Row style={{ justifyContent: "start" }}>
<InputFieldSmall style={{ marginRight: "16px" }}>
<Input placeholder="07250" />
</InputFieldSmall>
<ButtonBlack>우편번호 검색</ButtonBlack>
</Row>안녕하세요!
컴포넌트 재사용성에 관하여 질문드리고 싶은게 있습니다!
1일차 게시글 작성 UI 만들기 과제를 진행하던 중 CSS 스타일을 재사용 하기 위해서 Row라는 컴포넌트를 만들었습니다.
UI상 justify-content속성에 space-between 또는 flex-start 같이 약간만 변하는 부분이 존재해서 inline-stlye을 사용하였습니다.
제공 해주신 레퍼런스 코드에는 inline-style을 사용하지 않으셨는데 inline-style을 사용하는 것은 좋지 않은 방식인가요?
답변 1
1
안녕하세요 aphopis님!
inline-style을 사용하지 않는 이유 중 가장 큰 부분은 코드 가독성 때문입니다.
따라서 aphopis님 처럼 짧게 작성하는 것은 큰 문제가 되지않습니다.
다만, CSS를 inline-style로 작성하게 되면 CSS의 적용 우선순위가 올라가게 됩니다.
때문에 해당 부분을 잘 고려해서 작성해주셔야 합니다.
감사합니다.😁
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
41
1
댓글 기능 구현 중 질문드립니다.
0
68
1
쿠폰코드 발급
0
147
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
89
2
문의드립니다!! ㅠㅠ
0
107
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
80
2
_app.js 작성 이후로 에러가 발생하네요
0
96
2
학습자료
0
72
2
학습자료가 안열립니다.
0
51
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
61
0
기존강의 구매자, 업데이트 끝인가요?
0
111
3
업데이트 버전 수강
0
89
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
84
1
graphql 접속이 안됩니다.
0
101
2
const, let 사용 질문 드립니다.
0
72
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
124
2
회원가입 과제 피드백 부탁드립니다.
0
81
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
167
2
서버 502 error
0
248
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
185
2
2분 44초 질문
0
132
3