이 네 가지 방법은 JSX에서 조건을 처리할 때 적용하는 나의 경험 법칙이다. return 문 앞, JSX 외부에서 if/else를 사용하여 JSX의 {}로 출력할 변수를 생성한다. 또는 변수를 사용하지 않고, JSX에서 {}을 사용하여 엘비스 연산자 또는 표현식의 결과를 출력한다.

class MyReactComponent extends React.Component {
  render() {
      // JSX를 사용하지 않는 영역: 변수, if/else 문, 삼항 연산자를 사용
      return (
          // JSX: 삼항 연산자 또는 함수 실행 결과를 {}로 표시
      )
  }
}

 

여기까지 React와 JSX를 이용해 상호작용하는 UI를 만드는 데 중요한 조건 처리 방법을 살펴보았다. 때때로 자신이 작성한 우아하고 지적인 코드의 기능을 소개해서 다른 사람들이 빨리 이해하게 만들고 싶을 것이다. 그렇게 하려면 주석을 작성해야 한다.