📚챕터

리액트에서의 삼항 조건 연산자?

📆 학습 날짜

2024 / 01 / 02 (화)

---

👨🏻‍💻학습 내용

🎯삼항 조건 연산자

삼항 조건 연산자는 JS에서 유일하게 3개의 피연산자를 취할 수 있는 문법이다.

			조건문 ? 조건문이 참 true value : 조건문이 거짓 false value

삼항 조건 연산자는 기존 if 조건문을 간략하게 쓸 수 있다는 점에서 리액트에서 자주 활용하는데, 특히 JSX 내부에서 조건부로 렌더링하기 위해서 주로 활용 된다고 한다.

<script>
export default function Component({ condition }){
	return <>{condition ? 'true' : 'false' }</>
}
</script>

그러나 이러한 편리함이 주는 이점 때문에 삼항 조건 연산자 내부에서 또다시 삼항 연산자를 중첩해서 쓰는 경우가 종종 발생한다.

삼항 조건 연산자는 가급적이면 중첩해서 쓰지 않는 편이 좋다.

삼항 조건 연산자 말고도 조건부 렌더링을 구현할 수 있는 즉시 실행 함수 방법도 존재한다.

<script>
import { useState } from 'react'

export default function App(){
	const [count , setCount] useState(0)
    return (
    <div>
    {(() => {
    	if( count === 1 ) {
        	return ++count
        }else {
        	return --count
        }
    })()}
    </div>
    )
   }
</script>

하지만 즉시 실행 함수 문법은 JSX 내부의 가독성을 해치고 불필요하게 즉시 실행 함수를 선언해서 사용해야 한다는 점 때문에 자주 활용되지 않는다.

➡️ 다음은 타입스크립트에 대해 살펴보자.