값식문
// This JSX
ReactDOM.render(<div id="msg">Hello world!</div>, mountNode);
// Is transformed to this JS:
ReactDOM.render(
React.createElement("div", { id: msg }, "Hello world!"),
mountNode
);
위의 코드에서 render메서드는 두개의 인자를 넘기고있다, jsx와 mountNode
이를 babel를 만나면 밑의 처럼 트랜스파일링이 되넝 변환된다.
ReactDOM.render(<div id={if (condition) { "msg" }}> HelloWorld</div >)
// -> 변환
ReactDOM.render(
React.createElement("div", { id: if (condition) { "msg" } }, "Hello world!"),
mountNode
);위의 코드는 오류가 난다. 이유는 객체 id의 값이 값이 아닌 if문으로 들어갔기 때문이다.
ReactDOM.render(<div id={condition? 'msg':null}> HelloWorld</div >)위의 코드로 수정을 해야한다. 이는 변환된 id의 값에 삼항연산자인 식으로 들어가 값으로 귀결되기 때문에 오류가 발생되지 않는다.
const obj = {
id: condition ? "id" : null // 성공
}
const obj = {
id: if (condition) { "msg" } // 실패
}- 표현식은 값으로 귀결될 수 있고 값으로 수렴될수있는 식이이 때문이다.
문을 사용하고 싶다면 즉시실행함수(IIFE)
<p>
{(() => {
switch (this.state.color) {
case "red":
return "빨간색";
case "blue":
return "파란색";
default:
return "흰색";
}
})()}
</p>;이는 값을 바로 리턴하기 때문에 사용 가능하다.
<p>{condition || "white"}</p>;논리연산자를 사용한 식.
즉시실행함수를 권장하지는 않음. JS의 기초 문법에 대한 중요성 각인!
고차함수를 사용해야 하는 이유
<div>
{(() => {
const row = [];
for (let i = 0; i < objectRows.length; i++) {
rows.push(<ObjectRow key={i} data={objectRows[i]} />);
}
return row;
})()}
</div>;- 위의 설명처럼 jsx는 결국 문법적 설탕이므로 식또는 값이 들어가야한다. 그렇기에 문을 사용하여 식으로 귀결되기 위해서는 위처럼 즉시실행함수 등으로 만들어야한다.
- map, reduce, filter등을 사용해 지져분한 코드를 깔끔하게 사용하면 좋다.
{objectRows.map((obj, i) => (
<ObjectRow key={i} data={obj} />
))}삼항연산자 다루기
- 숏코딩보다는 어떨 때 무엇을 사용하는지에 대한 일관성이 더 중요하다.
- 삼항연산자는 3개의 피연산자를 취한다.
- 조건 ? 참일떄[식] : 거짓일때[식]
function example() {
return condition1
? value1
: condition2
? value2
: condition3
? value3
: value4;
}
function example() {
if (condition1) {
return value1;
} else if (condition2) {
return value2;
} else if (condition3) {
return value3;
} else {
return value4;
}
}
function example() {
switch (temp) {
case value:
//
break;
default:
break;
}
}위의 예시중 어떤걸 사용할 것인가...! 무지성 사용보다는 어떤게 일관성있고 가독성있는 코드인지 생각하자.
괄호를 이용한 사람이 읽기 좋은 코드
const exampe = condition
? (a === 0 ? 'zero' : 'positive')
: 'negative'삼항연산자는 Null값을 대비할 수 있다
const welcomeMessage = (isLogin) => {
const name = isLogin ? getName() : "이름없음";
return `안녕하세요 ${name}`;
};Bad Case - 리턴이 void인 함수
function alertMessage(isAdult) {
isAdult
? alert("입장 가능")
: alert("입장 불가능");
}이는 반환이 undefined이다. 사용자 입장에서는 큰 차이 없겠지만 굳이?
function alertMessage(isAdult) {
if (isAdult) {
alert("입장 가능");
} else {
alert("입장 불가능");
}
}이렇게 쓰는게 좋지 않을까
Truthy
- JS는 동적인 언어. 문법적인 형변환이 자주 일어난다.
if ("string".length > 0) {}
if (!isNaN(10)) {}
if (boolean === true) {}보다는
if ("string".length) {}
if (10) {}
if (boolean) {}단축평가(Short-circuit-evaluation)
true && true && "도달 0"; // 도달 0
true && false && "도달 x"; // false
false || false || "도달 0"; // 도달 0
true || true || "도달 x"; // true -> 첫번째부터 참이기에 두번째부터는 보지않음유용한 사용법
function fetchData() {
// if (state.data) {
// return state.data;
// } else {
// return "Fetching...";
// }
return state.data || "Fetching...";
}state.data가 참이면 data를 반환하고 아니면 문자열을 반환하는데 이를 삼항연산자(또는 if문)으로 할필요 없이 연산자를 사용하면 유용.
function favoriteDog(someDog) {
let dog;
if (someDog) {
favoriteDog = dog;
} else {
dog = "냐옹";
}
return dog + "입니다";
}임시변수를 사용하고 있는 위 코드는
function favoriteDog(someDog) {
return (someDog || "냐옹") + "입니다.";
}로 간단하게 구현 가능하다.
또다른 예시
function getActivieUserName(user, isLogin) {
// if (isLogin) {
// if (user) {
// if (user.name) {
// return user.name;
// } else {
// return "이름 없음";
// }
// }
// }
if (isLogin && user) {
return user.name || "이름 없음";
}
}단축평가를 사용하면 간단하게 코드 작성 가능
else if 피하기
- else if를 계속 쓰게 된다면 switch문을 고려해보거나. else로 나누고 그안에서 if문을 사용하면 가독성있는 코드가 된다.
const x = 1;
if (x >= 0) {
console.log("x는 0과 같거나 크다");
} else if (x > 0) {
console.log("x는 0보다 크다");
}
if (x >= 0) {
console.log("x는 0과 같거나 크다");
} else {
if (x > 0) {
console.log("x는 0보다 크다");
}
}
if (x >= 0) {
console.log("x는 0과 같거나 크다");
}
if (x > 0) {
console.log("x는 0보다 크다");
}else 피하기
function getActivieUserName(user) {
if (user.name) {
return user.name;
}
return user.name;
}Early Return
function loginService(isLogin, user) {
if (!isLogin) {
if (checkToken()) {
if (!user.nickName) {
return registerUser(user);
} else {
refreshToken();
return "로그인 성공";
}
} else {
throw new Error("No Token");
}
}
}의 중첩된 if문이 있다.
function login() {
refreshToken();
return "로그인 성공";
}
function loginService(isLogin, user) {
/**
* 함수를 미리 종료
* 사고하기 편함
*/
if (isLogin) {
return;
}
if (!checkToken()) {
throw new Error("No Token");
}
if (!user.nickName) {
return registerUser(user);
}
login();
}- 사람이 읽기 편한 코드
부정 조건문 지양하기
- !isCondition 과 같은 부정 조건문을 지양해야한다. 직관적으로 이해하기 어려움. 한번 더 꼬아서 생각해야 하기에 사용자 친화적 코드가 아니다.
- isNaN과 같은 논리. if(!isNaN) 숫자가 아닌게 아니다. -> 숫자다!?
- if else문의 논리적 흐름이 참 -> 거짓으로 흘러가는데 부정 조건문은 착각을 유발한다.
Default case 고려하기
function createElement(type, height, width) {
const element = document.createElement(type || "div");
element.style.height = height || 100;
element.style.height = width || 100;
return element;
}
createElement()위의 처럼 항상 default case를 고려하자
명시적인 연산자 사용 지향하기
연산자 우선순위를 다 외워도 결국 직관적으로 알 수 있게 괄호를 잘 사용하자.
예측 가능하고 디버깅이 쉬운 코드를 위해 노력하자
number--; // 도 좋지만
number = number - 1; // 을 쓰는게 더 명시적Nullish coalescing operator
0 || "10" // "10"0이라는 값을 기대하지만 falsy에 의해 false로 판단되어 "10" 결과를 나타낸다.
??
function createElement(type, height, width) {
const element = document.createElement(type ?? "div");
element.style.height = height ?? 100;
element.style.height = width ?? 100;
return element;
}
createElement('div', 0, 0) ==> // 0px- Null과 undefined일 때만 사용해야한다.
마라토너