삼항 연산자, 특히 flag 변수를 이용해서 조건부 렌더링을 쓸 때가 많은데 그러다보면 값이 없을 때에는 빈자리를 채워주기 위해서 null이나 빈 문자열('')을 써주는 경우가 가끔 있다.
빨간색으로 표시한 부분은 포스팅에 대한 답변이 있으면 말풍선 이모티콘 옆에 숫자 1을 표시해주고, 그렇지 않으면 빈 공란으로 두려고 했다. 이제까지 이럴 때 다음과 같이 코드를 작성했다.
<span>{answer ? 1 : null}</span>
똑같은 코드를 && 연산자를 써서 처리할 수도 있다. JavaScript에서 true && expression은 항상 expression으로 평가되기 때문이다. 이때 answer가 falsy한 값이면 리액트는 무시하고 건너뛴다.
<span>{answer && 1}</span>
이걸 이용해서 아래와 같이 답변이 있는 경우 스레드로 답변을 이어주고, 답변이 없으면 단독으로 게시물을 보여주는 코드를 정돈할 수 있게 되었다. 두 달 전에 바닐라JS로 처음 짠 코드를 그로부터 한 달 뒤에 리액트로 리팩토링하면서 컴포넌트 구조를 어떻게 손대야 하는지 몰라서 바닐라JS의 코드를 그대로 가져오기만 했는데, 이렇게 하나의 컴포넌트로 조건부 렌더링을 하는 식으로 정리를 하니 묵은 💩 싼 것 마냥 너무 상쾌한 기분이다. 으하하하!
📚 참고자료
[React] 깔끔한 조건부렌더링 작성하기
안녕하세요! 조건부렌더링에 관한 포스팅입니다.리액트로 컴포넌트를 만들다보면 props나 state에 따라 달라지는 컴포넌트를 반환하고 싶을 때가 있습니다.조건부렌더링을 깔끔하게 작성하면, 코
velog.io
조건부 렌더링 – React
A JavaScript library for building user interfaces
ko.reactjs.org
[React] 조건부 렌더링 패턴 Conditional Rendering Pattern
조건부 렌더링 패턴 Conditional Rendering Pattern 리액트의 조건부 렌더링 문서에서 조건에 따라 랜더링할 컴포넌트를 선택하는 방법을 소개하고 있지만 추가적으로 알아두면 유용한 best practices 패턴
ibocon.tistory.com
'배워서 남 주자' 카테고리의 다른 글
| [알고리즘] 애너그램 걸러내기 (0) | 2023.02.04 |
|---|---|
| substr(), substring(), slice() 차이 (1) | 2023.01.31 |
| 반응형 웹 디자인을 적용한 화면을 styled-components로 리팩토링하기 (0) | 2023.01.20 |
| CSS Grid Layout을 이용해 반응형 웹 디자인으로 Column Grid System 구현하기 (0) | 2023.01.20 |
| for loop와 forEach 메소드의 차이 (0) | 2023.01.16 |