20221027 TIL 다양한 리액트 조건문 사용법
회사를 다닐 때 동료분께서 이럴 때는 &&를 쓰면 돼요 라고 알려주신 적이 있었는데,
리액트에서 '조건 && 요소' 형태로 작성을 하셨는데, &&가 and연산자인 것은 알고 있었지만
&&가 true나 false를 반환하는 것으로 오해를 하고 있었어서 '조건 && 요소' 형태 코드를 해석할 수 없었다.
그런데 이제야 그 말씀을 이해할 수 있게 되었다.
&&는 true / false를 반환하는 연산자가 아니고, 왼쪽부터 falsy한 값을 찾아서 찾으면 그 falsy한 값을 반환하고,
만약 마지막까지 모두 truthy면 마지막에 위치한 값을 반환한다.
즉, &&연산자는
A && B라고 작성했다면
if (A) {
return B;
}
return A;와 동일한 코드이다.
'조건 && 요소' 형태는 조건이 true일 때 요소를 넣고 싶은 경우에 사용한다.
조건을 평가한 값이 false일 때 리액트는 false를 렌더링하지 않기 때문에 &&를 쓰면 쉽게 조건에 따라 렌더링을 할 수 있다.
하지만 주의할 점은 false가 아닌 0같은 falsy한 값은 렌더링을 하게 되기 때문에, && 앞에는 true, false를 반환하는 조건을 넣어야 한다.
만약 조건이 false일 때는 반환할 요소가 없을 때 && 연산자를 쓰면 깔끔하게 코드를 작성할 수 있다.
만약 조건에 따라 반환값이 달라지는 것이라면 삼항연산자를 사용하면 된다.
'조건 ? 조건이 참일 때 반환 값 : 조건이 거짓일 때 반환 값' 형태로 작성하면 된다.
이 때 두 반환 값 중에 한 값이 null이나 <></>같은 값이라면 &&연산자를 사용하는 것이 더 좋을 것이다.
물론 if문을 사용하는 방법도 있다!
if (조건) {
return 조건이 참일 때 반환 값;
}
return 조건이 거짓일 때 반환 값;
과 같이 작성하면 된다.
공식문서를 보니 친절하게 알려주고 있었다.
모를 때는 공식 문서에서 꼭 찾아보자!
참고