<div id="readability-page-1" class="page"><div>다른 사람들이 쓴 리액트 코드를 볼 때 마다 몇가지 눈여겨 보는게 있는데, 그 중 하나가 jsx안의 조건절이다. 이 사람은 <code>&amp;&amp;</code>을 선호나는지, 아니면 3항연산자를 선호하는지 살펴본다. 근데 보통은 간단해서 그런지 <code>&amp;&amp;</code>를 쓰는 경우가 더 많은 것 같다. 예전에는 이 것과 관련해서 코드 리뷰를 올려볼까도 했는데, 멀쩡히 작동하는 코드인데 괜히 시비 거는 것 같아서, 고칠 코드도 많아서, 그리고 결정적으로 소심해서 그냥 그냥 넘어가고는 했다. 그렇다. 이 글은 그냥 소심한 반항인 것이다.
<pre><code>export default function StudentsList({students}) {
 return (
 &lt;ul&gt;
 {students.map(({id, name, score}) =&gt; (
 &lt;li key={id}&gt;
 {name} {score}
 &lt;/li&gt;
 ))}
 &lt;/ul&gt;
 )
}
</code></pre>
여기에 이제 <code>&amp;&amp;</code>로 다음과 같은 조건을 추가했다고 생각해보자.
<pre><code>export default function StudentsList({students}) {
 return (
 &lt;ul&gt;
 {students.length &amp;&amp;
 students.map(({id, name, score}) =&gt; (
 &lt;li key={id}&gt;
 {name} {score}
 &lt;/li&gt;
 ))}
 &lt;/ul&gt;
 )
}
</code></pre>
만약 <code>students</code>에 <code>[]</code> 빈 배열이 온다면 렌더링이 안되어야 할 것 같지만, 실제로는 <code>0</code>이 프린트 된다.
이 버그는 예전 회사에서도 봤던 버그고, 심지어 페이팔에서도 이러한 버그가 있었다고 한다.
<img src="https://res.cloudinary.com/kentcdodds-com/image/upload/f_auto,q_auto,dpr_2.0/v1625033483/kentcdodds.com/content/blog/use-ternaries-rather-than-and-and-in-jsx/no-contacts.png" alt="https://res.cloudinary.com/kentcdodds-com/image/upload/f_auto,q_auto,dpr_2.0/v1625033483/kentcdodds.com/content/blog/use-ternaries-rather-than-and-and-in-jsx/no-contacts.png" width="NaN" height="NaN">
자바스크립트에서 <code>0</code>은 <code>falsy</code>한 값으로 취급되기 때문에, <code>&amp;&amp;</code> 우측에 있는 값은 계산하지 않는다. 근데 어디까지나 <code>falsy</code>한 값인 거지, <code>null</code>이나 <code>undefined</code>처럼 렌더링을 안하는 값은 아니기 때문에 (순수하게 빈값으로 계산되지는 않으므로) 0이 나오게 된다.
해결책은, <code>students.length === 0 &amp;&amp; ...</code>을 쓰거나, 삼항연산자로 바꾸면 된다.
<pre><code>export default function StudentsList({students}) {
 return (
 &lt;ul&gt;
 {students.length
 ? students.map(({id, name, score}) =&gt; (
 &lt;li key={id}&gt;
 {name} {score}
 &lt;/li&gt;
 ))
 : null}
 &lt;/ul&gt;
 )
}
</code></pre>
아래와 같은 코드는 어떤가?
<pre><code>// students가 undefined로 넘어왔다면?
export default function StudentsList({students}) {
 return (
 students &amp;&amp; (
 &lt;ul&gt;
 {students.map(({id, name, score}) =&gt; (
 &lt;li key={id}&gt;
 {name} {score}
 &lt;/li&gt;
 ))}
 &lt;/ul&gt;
 )
 )
}
</code></pre>
다음과 같은 에러가 날것이다.
<pre><code>Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
</code></pre>
(대충 또 끔찍하다는 이미지)
이 경우에는 <code>undefined &amp;&amp; ...</code> 이 되기 때문에, <code>undefined</code>가 리턴되고, 위와 같은 에러가 뜨게 된다.
<pre><code>0 &amp;&amp; true // 0
true &amp;&amp; 0 // 0
false &amp;&amp; true // false
true &amp;&amp; '' // ''
[] &amp;&amp; true // true
</code></pre>
이 처럼 <code>&amp;&amp;</code>는 자주 쓰는 <code>if</code>문 과 동작이 미묘하게 다르다. 그래서 이게 자바스크립트 퀴즈에 종종 나오곤한다.
<pre><code>const notifications = 1

console.log(
 `You have ${notifications} notification${notifications !== 1 &amp;&amp; 's'}`,
)
</code></pre>
<blockquote>
출처: <a href="https://quiz.typeofnan.dev/short-circuit-notifications/">https://quiz.typeofnan.dev/short-circuit-notifications/</a> <code>&amp;&amp;</code>은 정식 명칭으로 <code>Short-circuit evaluation</code>이다.
</blockquote>
지금까지 말한 예제와는 조금 다르지만, 이것도 마찬가지로 의도 대로 동작하지 않는다.
<pre><code>You have 1 notificationfalse
</code></pre>
<h2 id="그래서">그래서</h2>
명백하게 조건에 따라서 jsx에서 렌더링을 하고 싶지 않다면 삼항연산자를 썼으면 좋겠다.
<ul>
<li>우리가 이해하고 있는 <code>if</code>문 동작과 일치한다.</li>
<li>불필요한 버그나, 의도치 않은 동작 만들지도 않는다.</li>
<li>jsx에 <code>null</code>이 명시적으로 표시되어 있으면 다른 개발자들도 이 부분에서 렌더링이 안되는 경우가 있다는 것을 명시적으로 알 수 있고 이를 유념할 수 있다.</li>
<li>삼항연산자가 더 이쁘다. 👀</li>
</ul></div></div>

yceffort

사실 그냥 (몇 가지 합리적인 이유가 있는) 개인적인 취향임

JSX에서 && 대신에 3항 연산자를 더 선호하는 이유

댓글