[React JS] 리액트의 조건부 렌더링

 

리액트에서도 특정 조건에 따라 다른 결과물을 렌더링해야 하는 상황이 존재한다.

 

 

조건부 연산자(삼항 연산자)

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수 없다.

즉 return() 안의 JSX내부인 <div> if(...){...}</div>처럼 사용할 수 없는 것이다.

 

조건에 따라 다른 내용을 렌더링하고자 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자(삼항 연산자)를 사용해야 한다.

 

< JSX내부에서 삼항 연산자 사용 >

const App = () => {
  const name="react";
  return(
    <div>
      {name === "react" ? ( <h1>React</h1>) : ( <h1>Not React</h1> ) }
    </div>
  );
}

{조건문 ? 조건문이 참일 때 실행할 코드 : 조건문이 거짓일 때 실행하는 코드} 형식으로 작성

 

 

삼항 연산자는 중첩 사용도 가능하지만 오히려 보기 싫은 코드가 될 수 있다.

따라서 삼항 연산자를 중첩으로 사용해야 될 때는 return문 밖에서 if else를 사용하여 결과를 변수에 저장 후 그 변수를 JSX의 삼항 연산자에 사용하는 것을 추천한다.

 

 

 

AND 연산자(&&)로 조건부 렌더링

특정 조건일 때 렌더링하는 개발을 수행하다 보면, false일 경우 null을 렌더링해야 하는 상황이 존재할 것이다.

이때 삼항 연산자를 사용한다면 아래와 같은 코드로 작성할 수 있다.

 

const App = () => {
  const name="react-router";
  return(
    <div>
      {name === "react" ? <h1>React</h1> : null }
    </div>
  );
}

 

하지만 && 연산자를 사용하여 위의 코드를 더 짧은 코드로 간결하게 표현 가능하다.

const App = () => {
  const name="react";
  return(
    <div>
      {name === "react" && <h1>React</h1>}
    </div>
  );
}

 

{조건문 && 조건문이 참일 경우 실행할 식} 형식으로 작성