[Javascript] && 연산자 남발 금지🚫

Stop using && in React Conditional Rendering | CroCoder

🤨 이게 뭔데?

리액트를 다루다보면 특정 조건이 만족했을 때(간단한 예시로는 접근 권한이 있는) 특정 뷰를 보여줘야 하는 상황에서 조건부 렌더링(conditional rendering) 기법을 자주 사용한다.

이때 조건에 따라 삼항 연산자( 조건 ? 참일 때 결과 : 거짓일 때 결과)를 사용하기도 하지만, 굳이 조건이 거짓일 경우에는 뷰를 보여주지 않는 경우가 대부분이기 때문에 && 연산자를 주로 사용한다.(조건 && 만족할 경우 결과)

🤷 뭐가 문제인데?

처음에는 if문에서 벗어나 코드 길이도 줄고 보기에도 깔끔한 것 같아 클린 코드에 한 발짝 더 가까워졌구나! 하면서 좋아했지만 사용하다보니 특정 상황에서 문제가 발생했기 때문이다.

const MyComponent = () => {
	return (
		<>
			{postList.length && postList.map((post) => <Post />)}
		</>
	)
}

프로젝트에서 게시판 기능을 제작 중이었고, 서버에서 배열 형식의 게시글 목록을 받아온 뒤 게시글들을 화면에 보여주는 간단한 코드였다.

서버 구축 전 모의로 만든 데이터를 사용할 때는 상관없었는데, 서버가 완성된 후 서버와 통신한 결과를 화면에 출력했더니..

0

서버 상에 게시글 데이터가 없어 빈 배열을 반환받았을텐데, 빈 화면이 떠있어야 할 화면에 당당하게 숫자 0이 자리를 잡고 있었다.

🤦 왜 이러는건데?

/* 아무것도 렌더링하지 않는다 ✅ */
<>{false && <div>👋</div>}</>

/* 숫자 0을 렌더링한다 😡 */
<>{0 && <div>👋</div>}</>

/* 아무것도 렌더링하지 않는다 ✅ */
<>{""  && <div>👋</div>}</>

/* 아무것도 렌더링하지 않는다 ✅ */
<>{null && <div>👋</div>}</>

/* 아무것도 렌더링하지 않는다 ✅ */
<>{undefined && <div>👋</div>}</>

/* NaN을 반환한다 😡 */
<>{NaN && <div>👋</div>}</>

자바스크립트에서 && 연산자는 연산자 좌우항이 모두 참인지를 체크한다. 만약 좌항이 거짓이라면, 우항은 체크하지 않으며, && 연산자가 좌항을 반환한다.

따라서 게시글 리스트 배열의 길이인 postList.length를 조건으로 && 연산자에 집어넣은 나와, 빈 배열의 길이인 0을 false 로 알아보고 0을 그대로 반환한 자바스크립트의 환장의 콜라보가 이뤄낸 결과였으며, 리액트는 이를 렌더링하기 위해 string 으로 변환하여 화면에 출력한 것이다.

👀 그럼 어떻게 해야하는데?

해결법은 사실 간단하다. 크게 두가지가 있는데 먼저,

1. 귀찮지만 삼항 연산자를 사용한다.
   가장 확실한 방법이다. 조건의 참과 거짓에 따른 결과를 모두 명시하고 있어 원하는 결과만을 출력해낼 수있다.

postList.length ? postList.map((post) => <Post />) : null

2. Falsy values(거짓 같은 값)을 Boolean으로 변환한다.
   !! 연산자, 또는 Boolean()을 사용해 거짓 같은 값(falsy values)를 boolean 타입으로 변환해 true 혹은 false 만 반환하도록 하는 방법이다.

!!postList.length && postList.map((post) => <Post />))

🧑🏻‍💻 그래서..

이번 일을 계기로 머리로만, 눈으로만 알고 봐두며 정확히 알지도 못한 채 당연한 듯이 쓰고 있는 자바스크립트의 기능들과 원리에 대해 하나씩 자세히 알아보고 글로 남겨두기로 했다.