-
CSS의 길이 단위
-
CSS : flex
flex를 사용해 레이아웃을 쉽게, 명확하게 구성할 수 있습니다.
flex-direction, flex-wrap, justify-content, align-items만큼은 꼭 제대로 숙지해주세요! -
Component는 ui, logic 단위로!
React의 컴포넌트는, UI와 logic이 긴밀하게 연관되어 작동하는 단위입니다.
이를 통해 하나의 data에 대한 view와 template 모듈이 따로 존재하는 coupling 현상을 방지할 수 있습니다.
다르게 말하면, 하나의 data에 대한 로직은 되도록 컴포넌트 단위로 묶어주는게 좋습니다!
따라서 화면상의 어떤 부분의 UI 또는 logic(기능)이 주변과 완전히 차별화 되었을 때, 그 부분을 component로 따로 떼어내어 작성하시면 됩니다. (완전 다르게 생겼거나, 완전 특별한 기능을 갖고 있을 때) -
DOM 깊이 최소화
매번 서버로부터 모든 데이터를 전송 받는는 웹 어플리케이션 특성상, 페이지의 용량과 구조에 따른 다운로드 속도가 유저가 느끼는 퍼포먼스에 많은 영향을 끼칩니다.
이때 페이지내 html 태그들의 중첩 깊이가 깊으면 깊을 수록 DOM의 렌더링 속도가 현저히 느려지는데요, 따라서 평소에 중첩을 최대한 줄이는 습관을 들이시면 좋습니다! -
체이닝 패턴
체이닝 패턴이란 객체에 연쇄적으로 메서드를 호출할 수 있도록 하는 패턴입니다.
한 객체에 대해 여러가지 동작을 수행할 때, 호출을 여러 줄로 쪼개지 않고 한줄에 모을 수 있어 간략한 코드 작성에 도움이 됩니다. -
jsx spread attributes
spread operator를 사용해서 객체 리터럴을 분해해 깔끔하게 prop으로 넘길 수 있습니다.
(객체를 통째로 넘기면 경우에 따라 렌더링 최적화가 제대로 이루어지지 않을 수 있으니 피해주세요) -
적절한 태그 사용 (semantic tag)
-
자바스크립트 코딩 컨벤션 (명명 규칙) 준수
일관된 코딩 컨벤션은 가독성에 큰 도움이 됩니다! -
배열 element에 key값 부여
공식 문서 링크
key는 엘리먼트에 안정적인 고유성을 부여합니다. re-render 최적화 및 오류 방지를 위해 data의 unique key값으로 설정해주셔야합니다!
- 정돈된, 그룹화된 import문
외부 모듈 import와 내부 모듈 import를 따로 배치해주세요. 가독성에 도움이 됩니다.
- 가능하면 최대한 const를 사용
생각보다 let을 사용해야만 하는 상황이 흔치 않습니다.
let을 사용해야할 것 같으면, const로 바꿀 수 없을지 좀 더 고민해보세요!
-
commit할 때 주석은 최대한 제거
주석 없이도 이해 되는 코드가 좋은 코드입니다! 정말 불가피한 상황이 아니라면, 주석을 작성하기 보단 코드 구조 및 네이밍을 이해하기 쉽게 개선해보세요. -
하나의 파일에 하나의 component만 작성
한 파일에 여러 component를 작성하면 디버깅이 어려워집니다! 꼭 하나의 파일에 하나의 component만 작성해 주세요 ^^
# + 리액트 모범 사례
https://www.freecodecamp.org/korean/news/best-practices-for-react/
