코딩을 하다보면 여러가지 속성들을 나열해야 할 경우가 굉장히 많습니다.
const Container = styled.div`
position: absolute;
cursor: pointer;
width: 100px;
height: 100px;
user-select: none;
display: flex;
color: red;
`;
이런 것이나
<Component
onChange={setValue}
style={{ flex: 1 }}
value={value}
/>
const user = {
name: 'park',
pets: ['dog', 'cat'],
id: 1,
age: 1,
nickname: 'pjc0247',
birthday: '15551100',
};
이런 다양한 경우들이 있는데..
이미 눈치 채셨나요?
의식의 흐름대로 속성을 나열하시면 안됩니다.
const Container = styled.div`
position: relative;
width: 100px;
height: 100px;
color: red;
cursor: pointer;
user-select: none;
z-index: 1;
`;
저같은경우는 대략적으로 아래 순서와 같이 CSS를 정렬합니다.
정렬 순서는 참고용으로, 여러분이 보기 좋은 형태로 정렬 하시면 됩니다.
const user = {
id: 1,
name: 'park',
nickname: 'pjc0247',
age: 1,
birthday: '15551100',
pets: ['dog', 'cat'],
};
위 코드를 다시 가져왔습니다.
CSS 뿐만 아니라 모든 경우에 정렬을 어떻게 할 것인지를 생각해볼 수 있습니다.
아래 내용 또한 위 오브젝트의 속성들을 어떻게 정렬할지에 대한 제 의견입니다.
name
, nickname
/ age
, birthday
는 서로 비슷한 속성이므로 나란히 배치합니다.pets
는 배열이므로 가장 아래에 배치합니다.여기까지 오면 대충 어떤 느낌인지 감을 잡으셨을 것 같습니다.
<Component
disabled
style={{ flex: 1 }}
value={value}
onChange={setValue}
onFocus={onFocus}
onBlur={onBlur}
/>
value
, onChange
는 서로 연관된 속성이므로 나란히 놓습니다.value
를 값 프로퍼티들의 가장 아래, onChange
를 함수 프로퍼티들의 가장 위로 생각하시면 되겠네요.bool={true}
처럼 bool
로 줄일 수 있는 프로퍼티는 줄이고 가장 위로 보냅니다.key
는 bool
이 아닌 값 프로퍼티중 가장 위에 배치합니다.만약 key
에 대한 부분이 마음에 안드신다면 key
를 가장 위로 삼으셔도 됩니다.