JSX if 문 React.js에서 if 문을 작성하는 방법은 무엇입니까?

이 문서는 원래 https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-2/#how-to-write-if-statement-in-react-js에 게시되었습니다.




물론 Javascript나 Typescript 논리에서 if 문을 생각해보면 모든 Javascript나 Typescript에서와 동일합니다.

순수한 자바스크립트와 같은 if/else일 뿐이지만, 이 경우 일반적인 if/else에 대해 이야기하지 않겠습니다.

반응에서 우리는 한 가지 더, 렌더링을 위한 if 문이 필요할 것입니다.

이름은 "조건부 렌더링"이지만 간단하게 하기 위해 "반응 중인 if 문"에 머물겠습니다.

React.js 코드에서 볼 수 있는 조건부 렌더링을 사용하는 가장 인기 있는 두 가지 방법이 있으며 경우에 따라 둘 다 정확합니다.

사용할 수 있는 첫 번째 방법은 구성 요소 레이아웃에서 직접 조건부 렌더링을 정의하는 것입니다.

우리가 가장 많이 사용하게 될 빠르고 쉬우며 경우에 따라 성능면에서 최고입니다.

지정된 조건이 통과될 때 일부 요소를 렌더링하려는 경우 "if"와 같이 하나의 조건만 있는 경우에 이 방법을 사용할 것입니다.

두 번째 방법은 레이아웃의 지정된 부분을 처리하고 조건부로 렌더링하기 위해 만든 함수입니다. 이를 위해 if/else뿐만 아니라 스위치 케이스도 사용할 수 있습니다.

이 한 가지 방법은 더 많은 조건이 있는 경우, 특히 스위치 1이 있는 버전에서 사용하는 것이 옳습니다.

하지만 어쨌든 함수를 발동시키므로 하나의 조건이 있을 때 사용하는 것은 의미가 없습니다.

두 가지 방법을 모두 추가한 코드 예제를 살펴보겠습니다.

// The first example with the code inside functional component
function Parent(props) {
  return(
    <>
      {name === "Duomly" && (
        <DuomlyComponent/> 
      )}
    </>
  )
}

// The second example with the additional function
function renderComponent() {
  const name = 'Duomly';
  if (name === 'Duomly') {
    return 'Duomly';
  } else {
    return null;
  }
}

function Parent(props) {
  return renderComponent();
}

읽어 주셔서 감사합니다,
듀옴리의 라덱