TIL. 32 React - 리액트 내부에서의 if문 패턴

💡 리액트의 삼항연산자

인스타그램 클론 코딩 중 mock data와 리팩토링을 진행하면서 여러가지 헷갈렸던 부분을 정리하기 위해 쓰는 글이다.

• 리액트에서는 2가지 방법으로 삼항연산자를 사용한다.
  1. JSX 밖에서 if문 방식으로 값을 설정
  2. JSX 안에서 {}를 활용해 조건부로 연산자를 활용
     
     
• 아래는 2번 방식을 통해 사용한 코드이다.

    <button
      className={`commentBtn ${iptCommentValue.length > 0 ? "on" : "off" }`}
 
      disabled={disabled}
      onClick={this.handleCommentBtn}> 게시
    </button>
     
     // className + 삼항연산자를 활용해 따로 함수를 만들지 않고 style을
        변경했다. 함수 사용을 위해 백틱(`)을 사용해 코드를 구성했고 결과적으로
        true 값에는 clssName이 on인 class, false 값에는 off class가 생성되어
        해당 style이 적용된다.

• 삼항연산자에서 false 값을 렌더링하지 않을 때에는 &&으로 뒷 부분 생략이 가능하다.

   { 조건 && true일 때의 값 }
   
   // &&을 쓰지 않으면 { 조건 ? true일 때의 값 : false일 때의 값 }