꾸생의 블로그 :: 리액트 변수 네이밍 컨벤션

⚖️ 리액트 공식 변수명 네이밍 규칙이 있을까?

리액트는 네이밍 규칙에 대한 구체적인 지침이나 설명, 권장 사항도 제공하지 않는다. (출처)

공식문서에 검색해도 나오지 않으며, 자유롭게 컨벤션을 만들어 사용하라는 것 같다.

반면 Vue의 경우 디테일하게 공식 컨벤션을 제공한다.

Vue.js

Vue.js - The Progressive JavaScript Framework

https://ko.vuejs.org/style-guide/rules-strongly-recommended#prop-name-casing

✅ 리액트 공식 문서에서 제공하는 네이밍 규칙

📌 업데이트 함수 인수의 이름 지정(링크)


setEnabled(e => !e);
setLastName(ln => ln.reverse());
setFriendCount(fc => fc * 2);
setAge(prevAge => prevAge + 1)

업데이터 함수 인수의 이름은 해당 상태 변수의 첫 글자로 지정하는 것이 일반적이다. 그러나 prevAge와 같이 더 명확하다고 생각되는 다른 이름으로 부를 수 있다.

📌 이벤트 함수 이름 지정 (링크)


function CustomButton({ onSmash, children }) {
  return (<button onClick={onSmash}>{children}</button>);
}

export default function App() {
	return (
	  <div>
	    <Button onSmash={() => alert('Playing!')}>Play Movie</Button>
	    <Button onSmash={() => alert('Uploading!')}>Upload Image</Button>
	  </div>
	)
);

<button/> 및 <div/>와 같은 기본 제공 컴포넌트는 onClick과 같은 브라우저 이벤트 이름만 지원한다. 그러나 자체 컴포넌트를 빌드할 때 이벤트 핸들러 prop의 이름을 원하는 방식으로 지정할 수 있다.

규칙에 따라 이벤트 핸들러 prop은 on으로 시작하고 그 뒤에 대문자가 와야 하는데, 예를 들어 <CustomButton/> 컴포넌트에 onClick 속성은 onSmash라고 부를 수 있다.

📄 리액트 공식 문서

React

React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.

https://react.dev/

공식 문서가 리뉴얼 된지 좀 됐다 😃