[React] && 를 이용한 조건부 렌더링, 불필요한 0 렌더링 이유

 boolean 값에 따라 렌더링 유무가 결정이 된다면 &&연산자를 사용하는게 더욱 효율적이라고 배웠다. 스터디 실습 과제로 숫자야구를 구현했고, 배운대로 && 연산자를 잘 사용하고 조건에 따라 렌더링도 잘 되는 것을 확인 할 수 있었다. 하지만 입력창 하단에 보이는 난데없는 0의 등장…😭 F12를 눌러 개발자 모드에서 html 파일을 봤을 때에 저 0이 단순 텍스트로 나와서 원인을 찾는데에 애먹었었다. 그리고 곧 이게 && 연산자를 조건부 렌더링 시 잘못 사용한 예제라는 것을 파악할 수 있었다.

 

 

🎯 원인 분석

 리액트 공식문서에 있는 조건부 렌더링에 대해 살펴보자.

JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가됩니다.
따라서 && 뒤의 엘리먼트는 조건이 true일때 출력이 됩니다. 조건이 false라면 React는 무시하고 건너뜁니다.
falsy 표현식을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 falsy 표현식이 반환된다는 것에 주의해주세요. 아래 예시에서, <div>0</div>이 render 메서드에서 반환됩니다.

true/false 반환시에는 대부분이 쓰고 있는 꼴이지만, falsy한 표현식을 반환했을 경우에는 처음 알게 되었다😳  아마도 내 코드가 false가 아닌 falsy 표현식을 반환했기 때문이라는 것 같아 그 문제의 코드를 가져와봤다. 

{isOver && <Ending msg={isOver.msg} onRestart={onRestart} />}

이 코드만 봤을 때에는 문제가 없어 보인다. 하지만 저 isOver이라는 변수에 어떤 값이 들어있느냐에 따라 다를텐데, 나와 같은 경우,

  const [isOver, setIsOver] = useState(0);

 위와 같이 초기화를 시켜두었고, 이게 모든 문제의 원인이었다. isOver 변수를 boolean값이 아닌 숫자 0으로 대입을 했기 때문에, 위와 같은 조건식에서 false가 아닌 0이라는 falsy 표현식이 반환된 것이다. boolean보다 0과 1로 대신해서 쓰는게 편해서 써왔었는데, 이게 발을 걸줄은 몰랐다. 

 

😆 해결

 아래와 같이 초기화를 포함하여, isOver 변수를 업데이트할 때마다 boolean 타입으로 진행하니, 문제의 0이 사라진 모습이다.

  const [isOver, setIsOver] = useState(false);

결과화면(0이 흔적도 없이 사라졌다.)

 

 

 

 다른 분들도 불필요한 0이 렌더링 된다면 이 &&연산자에 잘못된 인자를 주어 그런 것은 아닌지 한번 돌이켜 보면 좋을 것 같다. 

false와 falsy 표현식은 엄연히 다르다...!!
&&를 활용한 조건부 렌더링 잘 알고 사용하기!