의식의 흐름과 코딩

코딩을 하다보면 여러가지 속성들을 나열해야 할 경우가 굉장히 많습니다.

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를 정렬합니다.

• 위치값: 이 element가 어디에 표시될건지
• 모양(외적인 모양): 이 element가 어떻게 표시될건지
  • width
  • height
• 모양(내적인 모양): element안의 컨텐츠가 어떻게 표시될건지
  • color
  • text-align
  • font-size
• 특수 속성: 화면에 표시되는것과 관련 없는 특수 속성들
  • transition
  • cursor
  • user-select
• z-index
  • 이 속성은 단순히 어떻게 표시되는지를 지정하는것 뿐만 아니라, 버그를 만들어낼 수 도 있는 속성입니다. 따라서 눈에 잘 띄도록 가장 마지막에 배치합니다.

정렬 순서는 참고용으로, 여러분이 보기 좋은 형태로 정렬 하시면 됩니다.

일반적인 오브젝트에서 프로퍼티 정렬하기

const user = {
  id: 1,
  name: 'park',
  nickname: 'pjc0247',
  age: 1,
  birthday: '15551100',
  pets: ['dog', 'cat'],
};

위 코드를 다시 가져왔습니다.

CSS 뿐만 아니라 모든 경우에 정렬을 어떻게 할 것인지를 생각해볼 수 있습니다.
아래 내용 또한 위 오브젝트의 속성들을 어떻게 정렬할지에 대한 제 의견입니다.

• id는 가장 위에
• name, nickname / age, birthday 는 서로 비슷한 속성이므로 나란히 배치합니다.
• pets는 배열이므로 가장 아래에 배치합니다.

React에서 프로퍼티 정렬하기

여기까지 오면 대충 어떤 느낌인지 감을 잡으셨을 것 같습니다.

<Component
  disabled
  style={{ flex: 1 }}
  value={value}
  onChange={setValue}
  onFocus={onFocus}
  onBlur={onBlur}
/>

• 함수(onXXX)는 전부 가장 아래에 놓습니다.
• value, onChange는 서로 연관된 속성이므로 나란히 놓습니다.
  • value를 값 프로퍼티들의 가장 아래, onChange를 함수 프로퍼티들의 가장 위로 생각하시면 되겠네요.
• bool={true} 처럼 bool 로 줄일 수 있는 프로퍼티는 줄이고 가장 위로 보냅니다.
• key는 bool이 아닌 값 프로퍼티중 가장 위에 배치합니다.

만약 key에 대한 부분이 마음에 안드신다면 key를 가장 위로 삼으셔도 됩니다.