클린코드 - 의미 있는 변수명 짓기

코드 컨벤션

1. camelCase

거의 대부분의 변수 함수 선언에 사용됩니다.

const thisIsVariable = true;
const goToHome = () => {
	return;
}

2. kebab-case

페이지, pathname, 폴더명, css className 에 사용됩니다.

pages
	ㄴ todo-list
		ㄴTodoList.tsx
	ㄴ todo-detail
		ㄴTodoDetail.tsx

class-name, .item-id

3. snake_case

소문자 표현은 잘쓰이지 않지만, 대문자 표현은 상수 표현 할때 많이 사용합니다.

const default_snake_case = '파이썬에서 많이 쓰임 js는 잘 안씀'

// 요건 js 에서 많이 씀
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;
setTimeout(blastOff, MILLISECONDS_PER_DAY);

 

4. PascalCase

컴포넌트, page 파일 명에 많이 사용합니다.

TodoList.tsx
Detail.tsx

 

 

왜 코드컨벤션이 중요할까요?

• 팀원 모두 같은 코드를 작성할 수 있게 됩니다.
• 팀의 코드를 한 사람이 짠 코드처럼 느껴지게 하는데에 목적이 있습니다.
• 사람에 의존적이지 않고 규칙에 의존적인 코드를 짜게 되고 모르는 부분의 코드도 빠르게 파악할 수 있게합니다.
• 코드, 컨벤션만 보고 어떤 의도의 코드인지 파악하기 쉽게 됩니다.
• 이런 이점들 때문에 협업하기 전에 여러 Convention 들을 정하고 시작하는 것입니다.

기본적인 변수 / 함수 선언법

변수는 noun first

// bad
var goToHome = 1;

// good
let variable = 1;
let phoneNumber = '010-1234-5678'

 

꼭 명확한 의미를 담아서 작성하기 / 길더라도 (약속되지 않은) 줄임말은 쓰지 않기

//bad
let a = 1;
let b = 86400;

const gmName = "kim";
const gf = undefined;

//good
const itemId = 1;
const ONE_DAY_SECONDS = 86400;

const grandMotherName = "kim";
let girlFriend = undefined;

 

boolean 은 is, has, thisIs, -ing

//bad
const good = true;
const girlFriend = true;

//good
const isGood = true;
const thisIsGood = true;
const hasGirlFriend = false;

//mz 채신 유행
const loading = true;

if(isGood)

 

함수는 verb first

//bad
const home = () => {}
const eventHandler = () => {}

//good
const goToHome = () => {}
const handleEvent = () => {}

 

복수에는 복수 표현 사용하기 todoItems, todoList

//bad
var todo = [1,2,3,4];

//good
const todos = [1,2,3,4];
const todoList = [1,2,3,4];

 

객체 구조 분해 할당과 스프레드 연산자

스프레드 연산자

배열

const array = [1,2,3];
const newArray = [...array];

 

객체

const obj = { key: 1 } 
const newObj = {...obj}

 

 

구조분해 할당

배열

const [state,setState] = useState();

 

객체

// 하나의 동일한 변수명만 존재
const ItemComponent = ({title}) => {
	return <span>{title}</span>
}

// 같은 변수명을 여러번 써야할때 ex) isLoading, isError
const ItemComponent = ({title}) => {
	const {title: someHooksTitle} = someHook();
	return <span>{title}, {someHooksTitle}</span>
}

 

 

스프레드 연산자 + 구조 분해 할당

컴포넌트

// rest = {content, subTitle}
const Parent = ({title, ...rest}) => {
	return <>
					<span>{title}</span>
					<Child {...rest}/>
				</>
}

const Child = ({content, subTitle}) => {
	return <>
					<span>{content}</span>
					<span>{subTitle}</span>
				</>
}

 

함수

const validBoolean = (firstBoolean, secondBoolean, thirdBoolean) => {
	return firstBoolean && secondBoolean && thirdBoolean
}

//arg = [firstBoolean, secondBoolean, thirdBoolean]
const validBoolean = (...args) => {
	return args.every(isTrue => isTrue);
}