20221027 TIL 다양한 리액트 조건문 사용법

 

회사를 다닐 때 동료분께서 이럴 때는 &&를 쓰면 돼요 라고 알려주신 적이 있었는데,

리액트에서 '조건 && 요소' 형태로 작성을 하셨는데, &&가 and연산자인 것은 알고 있었지만

&&가 true나 false를 반환하는 것으로 오해를 하고 있었어서 '조건 && 요소' 형태 코드를 해석할 수 없었다.

그런데 이제야 그 말씀을 이해할 수 있게 되었다.

&&는 true / false를 반환하는 연산자가 아니고, 왼쪽부터 falsy한 값을 찾아서 찾으면 그 falsy한 값을 반환하고,

만약 마지막까지 모두 truthy면 마지막에 위치한 값을 반환한다.

 

http://3.bp.blogspot.com/-NqOmhdEArKk/Ukrf3jlaCII/AAAAAAAACZM/8tHIlCCrTXA/s1600/Ampersands.png

즉, &&연산자는

A && B라고 작성했다면

if (A) { 
  return B;
}

return A;

와 동일한 코드이다.

 

'조건 && 요소' 형태는 조건이 true일 때 요소를 넣고 싶은 경우에 사용한다.

조건을 평가한 값이 false일 때 리액트는 false를 렌더링하지 않기 때문에 &&를 쓰면 쉽게 조건에 따라 렌더링을 할 수 있다.

하지만 주의할 점은 false가 아닌 0같은 falsy한 값은 렌더링을 하게 되기 때문에, && 앞에는 true, false를 반환하는 조건을 넣어야 한다.

 

만약 조건이 false일 때는 반환할 요소가 없을 때 && 연산자를 쓰면 깔끔하게 코드를 작성할 수 있다.

 

만약 조건에 따라 반환값이 달라지는 것이라면 삼항연산자를 사용하면 된다.

'조건 ? 조건이 참일 때 반환 값 : 조건이 거짓일 때 반환 값' 형태로 작성하면 된다.

이 때 두 반환 값 중에 한 값이 null이나 <></>같은 값이라면 &&연산자를 사용하는 것이 더 좋을 것이다.

 

물론 if문을 사용하는 방법도 있다!

if (조건) {

  return 조건이 참일 때 반환 값;

}

return 조건이 거짓일 때 반환 값;

 

과 같이 작성하면 된다.

 

공식문서를 보니 친절하게 알려주고 있었다.

모를 때는 공식 문서에서 꼭 찾아보자!

 

참고

https://reactjs.org/docs/conditional-rendering.html