정확한 변수명 작성법

변수명은 개발 중에도 영향을 미친다

개발을 하다보면 자연히 코드가 어지러워지고 어떤 변수가 무엇을 의미하는지 전부 기억하기 어려워진다. 따라서 보면 바로 알 수 있도록 변수명을 명확하게 짓는 게 중요하다. 나중에 리펙토링을 할 때나 다른 사람을 위해서가 아니라 현재 개발 퍼포먼스에 큰 영향을 미친다.

목적과 기능을 분명히 알 수 있도록 짓기

함수이든, 변수명이든 이름을 지을 때는 목적과 기능을 구체적으로 알 수 있도록 지어야 한다. 가령 모달창을 띄우는 걸 제어하는 변수를 open이라고 짓기보다는 showReceiptInputDialog으로 짓는 게 좋다. 뭔가가 열리는 동작이 모달창 하나만 있을 때는 open으로 써도 알아볼 수 있지만, 비슷한 기능이 늘어날수록 혼선이 오고 다른 기능의 이름 짓기도 힘들어진다.

그럼에도 어려운 부분

개발자의 입장에서 보기엔 똑같은 형식의 동일한 데이터인데, 변수명을 다르게 지어야 할 때가 있다. 그럴 때는 기획자나 사용자의 시각으로 보는 일이 필요한 것 같다. (사실 이건 아직 잘 모르겠다...) 해당 데이터가 어떤 DB에 속해 있는지도 중요한 단서가 된다.

함수명을 지을 때의 암묵적인 규칙들도 있다. 무언가를 제어하는 함수를 작성할 때는 handle을 앞에 붙인다. 그리고 React에서는 props로 함수를 넘겨줄 때 on을 앞에 붙인다.

// 신청폼을 여는 함수
handleOpenApplyForm = (donationId) => {
  this.setState({
    showReceiptInputDialog: true,
    donationId: donationId,
    edit: false
  });
};

// 모달창을 닫는 함수
<ReceiptInputDialog
  onClose={() => this.setState({ showReceiptInputDialog: false })}
/>