변수 컨벤션

공통

• 모호함을 주는 변수명은 올바른 작성법이 아님
• 다른 사람들이 봤을 때 한 번에 이해 할 수 있도록, 최대한 끊임없이 고민하고 작성해야 됨.
• 여기에 적혀있지 않지만 컨벤션이 필요한 case가 생길 경우, 자유롭게 팀원들에게 공유하고 같이 결정
  • ex. 어떤 태그의 위치를 옮기는 함수를 만들고 싶은데요. 이럴때는 컨벤션을 어떻게 가져갈까요?
  • ex.

변수

• 변수 이름은 명사로 작성
• camel case로 작성
• 단순 boolean일 경우 -> is~ed
  • ex) isSelected, isClicked
• 특정 데이터(배열, 객체 등)를 가지고 있는 boolean인 경우 : has~
• button -> btn
• 현재 값을 저장하는 변수 : cur(current의 약쟈)~
• 이전 값을 저장하는 변수 : prev~
• 배열에서 마지막 값을 저장하는 변수 : last~

함수

• 함수 이름은 동사로 작성
• 값을 불러오는 함수 -> get~~
• 값을 업데이트 하는 함수 -> update~
• 값을 삭제하는 함수 -> delete~
• 값을 생성하는 함수 -> create~
• 이벤트 함수 : 변수명 앞에 이벤트 작성
  • ex) 클릭 이벤트 : clickArrowBtn
  • ex) 제출 이벤트 : submitMarkDownInput

hooks

• 공통
  • hooks 내부에 사용한 state는 의존성 배열에 반드시 추가
  • 특수한 상황에서 특정 state를 의존성 배열에 추가하면 안되는 경우, 반드시 팀원들에게 이유를 설명하고 eslint로 off
  • push, pop, shift, unshift, 배열 인덱스에 접근해서 값 변경과 같은 방법으로 state를 절대 조작하면 안됨. 이런 경우에는 펼침 연산자(...)나 immer를 사용
• useState
  • 두번째 변수에 set~으로 작성
    • ex) [isSelected, setIsSelected] = useState(false);
• useRef
  • refObject인 경우-> 변수명 뒤에 Ref를 붙임
    • ex) const markDownInputRef = useRef<HTMLDivElement | null>();
  • 이벤트 id를 저장하는 경우 -> 변수명 뒤에 Id를 붙임
    • ex) const animatedId = useRef(0);
  • mutableRef를 저장하는 경우 -> 특정한 규칙은 없지만, 한번에 이해되는 변수명으로 작성