◆ ESSAY
다른 사람들이 쓴 리액트 코드를 볼 때 마다 몇가지 눈여겨 보는게 있는데, 그 중 하나가 jsx안의 조건절이다. 이 사람은 &&을 선호나는지, 아니면 3항연산자를 선호하는지 살펴본다. 근데 보통은 간단해서 그런지 &&를 쓰는 경우가 더 많은 것 같다. 예전에는 이 것과 관련해서 코드 리뷰를 올려볼까도 했는데, 멀쩡히 작동하는 코드인데 괜히 시비 거는 것 같아서, 고칠 코드도 많아서, 그리고 결정적으로 소심해서 그냥 그냥 넘어가고는 했다. 그렇다. 이 글은 그냥 소심한 반항인 것이다.
export default function StudentsList({students}) {
return (
<ul>
{students.map(({id, name, score}) => (
<li key={id}>
{name} {score}
</li>
))}
</ul>
)
}
여기에 이제 &&로 다음과 같은 조건을 추가했다고 생각해보자.
export default function StudentsList({students}) {
return (
<ul>
{students.length &&
students.map(({id, name, score}) => (
<li key={id}>
{name} {score}
</li>
))}
</ul>
)
}
만약 students에 [] 빈 배열이 온다면 렌더링이 안되어야 할 것 같지만, 실제로는 0이 프린트 된다.
이 버그는 예전 회사에서도 봤던 버그고, 심지어 페이팔에서도 이러한 버그가 있었다고 한다.
자바스크립트에서 0은 falsy한 값으로 취급되기 때문에, && 우측에 있는 값은 계산하지 않는다. 근데 어디까지나 falsy한 값인 거지, null이나 undefined처럼 렌더링을 안하는 값은 아니기 때문에 (순수하게 빈값으로 계산되지는 않으므로) 0이 나오게 된다.
해결책은, students.length === 0 && ...을 쓰거나, 삼항연산자로 바꾸면 된다.
export default function StudentsList({students}) {
return (
<ul>
{students.length
? students.map(({id, name, score}) => (
<li key={id}>
{name} {score}
</li>
))
: null}
</ul>
)
}
아래와 같은 코드는 어떤가?
// students가 undefined로 넘어왔다면?
export default function StudentsList({students}) {
return (
students && (
<ul>
{students.map(({id, name, score}) => (
<li key={id}>
{name} {score}
</li>
))}
</ul>
)
)
}
다음과 같은 에러가 날것이다.
Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
(대충 또 끔찍하다는 이미지)
이 경우에는 undefined && ... 이 되기 때문에, undefined가 리턴되고, 위와 같은 에러가 뜨게 된다.
0 && true // 0
true && 0 // 0
false && true // false
true && '' // ''
[] && true // true
이 처럼 &&는 자주 쓰는 if문 과 동작이 미묘하게 다르다. 그래서 이게 자바스크립트 퀴즈에 종종 나오곤한다.
const notifications = 1
console.log(
`You have ${notifications} notification${notifications !== 1 && 's'}`,
)
출처: https://quiz.typeofnan.dev/short-circuit-notifications/
&&은 정식 명칭으로Short-circuit evaluation이다.
지금까지 말한 예제와는 조금 다르지만, 이것도 마찬가지로 의도 대로 동작하지 않는다.
You have 1 notificationfalse
명백하게 조건에 따라서 jsx에서 렌더링을 하고 싶지 않다면 삼항연산자를 썼으면 좋겠다.
if문 동작과 일치한다.null이 명시적으로 표시되어 있으면 다른 개발자들도 이 부분에서 렌더링이 안되는 경우가 있다는 것을 명시적으로 알 수 있고 이를 유념할 수 있다.