[React] && 를 이용한 조건부 렌더링, 불필요한 0 렌더링 이유
boolean 값에 따라 렌더링 유무가 결정이 된다면 &&연산자를 사용하는게 더욱 효율적이라고 배웠다. 스터디 실습 과제로 숫자야구를 구현했고, 배운대로 && 연산자를 잘 사용하고 조건에 따라 렌더링도 잘 되는 것을 확인 할 수 있었다. 하지만 입력창 하단에 보이는 난데없는 0의 등장…😭 F12를 눌러 개발자 모드에서 html 파일을 봤을 때에 저 0이 단순 텍스트로 나와서 원인을 찾는데에 애먹었었다. 그리고 곧 이게 && 연산자를 조건부 렌더링 시 잘못 사용한 예제라는 것을 파악할 수 있었다. 🎯 원인 분석 리액트 공식문서에 있는 조건부 렌더링에 대해 살펴보자. JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 f..
Front-end/React 2022. 8. 7. 04:45