고수들의 리액트 코드를 보아하니 일명 "그리고"의 의미를 가진 &&연산자를 다르게 사용하고 특이하고 사용하고 있는 것을 목격했다.
그래서 &&연산자에 대해 더 알아보기로 했다. 다음과 같은 예제를 한번 보자.
const a = 3;
let b = 0;
a === 3 && (b = 2);
console.log(b);
조건문 안에 "그리고"라는 의미를 가진 &&연산자가 내가 모르던 방식으로 사용하고 있었다.
JavaScript, React에서 값을 결정하거나 조건부 렌더링을 하는 등 다양한 상황에서 활용될 수 있다.
컴포넌트 조건부 렌더링을 하는 경우 return ( ... ) 부분 코드를
import React, { useState } from "react";
export default function App() {
const [bool, setBool] = useState(false);
console.log("Render!")
const onClick = () => {
bool === true ? setBool(false) : setBool(true);
};
return (
<div>
<button onClick={onClick}>Click</button>
{
bool === true ? (
<div>Bool is true</div>
) : null
}
</div>
)
}
다음과 같이 바꿀 수 있다.
import React, { useState } from "react";
export default function App() {
const [bool, setBool] = useState(false);
console.log("Render!")
const onClick = () => {
bool === true ? setBool(false) : setBool(true);
};
return (
<div>
<button onClick={onClick}>Click</button>
{
bool === true && (
<div>Bool is true</div>
)
}
</div>
)
}
코드에 :null을 제외시킬 수 있어 가독성을 개선할 수 있다.