삼항연산과 조건부 렌더링

Js를 포함한 다양한 개발 언어들은 다양한 조건문을 사용한다.
그중에서도 삼항 연산은 명시적이고 효율적이기에 많이 사용되는 조건문이다.

삼항연산과 그를 통한 조건부 렌더링에 대해 알아보자.

삼항연산

Ternary Operation, 조건문의 기본인 if else문을 대체하기 위해 많이 사용된다.

기본적인 구조는 이름처럼 세개의 항을 통해 조건문을 실행하는 방식이다.
구조는 아래와 같다.

조건 ? 값1 : 값2

조건의 결과에 따라 0또는 1(true 또는 false)가 반환되며 0(false)의 경우 전자를, 1(true)의 경우 후자를 실행(반환)한다.

장점

삼항연산은 주로 if else문을 단축하는 형태로 대체한다.

즉, 명시적이고 효율적이다.

주의

if else를 단축하는 용도로 사용하지만,
조건문을 여러번 넣기위해 삼항 연산을 여러번 중첩하게 되면,
오히려 코드 가독성만 심히 떨어지게 만든다.

console.log(a === 1 ? "a = 1" : a === 2 ? "a = 2" : a === 3 ? "a = 4" : "그외");

보다시피 이 코드의 목적을 한눈에 파악하기 힘들어진다.
이는 가독성이 떨어짐과 동시에 유지보수를 힘들게 한다.

조건부 렌더링

조건문(주로 삼항연산)을 활용해 특정한 조건에 따라 렌더링 여부를 결정하는 방법.

const Component = (props) => {
  return ( 
    		<>
    			{ props.isLogin ? <h1>Welcome</h1> : "" }
        	</>
  )
}

위 예시 코드를 보면 isLogin의 참, 거짓 여부에 따라 태그의 렌더링 여부를 결정한다.

활용

삼항 연산을 통한 조건부 렌더링은 프로젝트에서 로그인 여부 등과 같이 상태에 따라 다르게 렌더링 해야하는 상황에서 유용하게 사용될 수 있다.