React - 삼항연산자 대신 이런 방법이?

리액트를 활용할 때 삼항연산자는 정말 많이 쓰인다.

 

삼항연산자를 모르면 여기로 가서 보고 오시길

 

 

{조건 ? 맞을 때 : 틀릴 때}

 

이렇게 사용된다.

 

Boolean 타입의 조건이 무조건 앞에 오고

그 다음에 ?를 붙여주고

조건이 true일 때 실행할 코드가 앞에

조건이 false일 때 실행할 코드가 뒤에 온다.

 

간단한 예시들은 언제나 쉽다. 

 

하지만 역시나 얘도 코드가 길어질 때 가독성이 떨어진다. 

 

조건이 맞을 때

<p>No expeneses Found.</p> 

 

조건이 틀릴 때

filteredItems.map((expense) => {

      return (

        <ExpenseItem

          key={expense.id}

          date={expense.date}

          title={expense.title}

          amount={expense.amount}

        />

      );

    }

이렇게 실행한다고 하면 어떨까?

 

jsx에서 삼항연산자는 중괄호 {}를 사용해서 사용하는 경우가 많은데

이 중괄호의 끝이 어딘지 헷갈리게 되어 어디까지가 연산문인지 헷갈릴 수 있다.

 

해결 방법은 그냥 새로운 변수를 추가해주는 것

 

 

아래와 같이 변수를 새로 선언해준다.

(const 대신 let 사용)

 

그리고 조건에 따라서 변수를 바꿔준다.

그리고 jsx에서 {}안에 쏙 넣어서 출력해주면 원하는 결과값이 나온다. 

---

개발자의 마인드는 있는 걸 잘 활용하는 것도 있지만

새로운 걸 끌어다오는 걸 자유롭게 할 수 있는 오픈 마인드가 중요함을 한 번 더 깨닫게 된다.

 

주어진 판에서 끙끙 거리며 있는 도구만 쓰려고 하지 말고

새로운 도구를 도입하거나 판을 새로 바꿀 시도도 머뭇거리지 않아야함을 배운다.