리액트에서 자주 사용하는 조건문 6가지

리액트에서 자주 사용하는 조건문 6가지

 

---

1. 컴포넌트 내부의 if/else 문

가장 기본적인 방식으로, 컴포넌트 내에서 조건에 따라 다른 JSX를 반환합니다.

function Component() {
  if (조건) {
    return <p>조건이 참일 때 보여줄 내용</p>;
  } else {
    return <p>조건이 거짓일 때 보여줄 내용</p>;
  }
}

jsx

 

이 방법은 컴포넌트에서 JSX를 반환하기 전에 조건에 따라 완전히 다른 내용을 보여줄 때 유용합니다 

 

---

2. JSX 내부의 삼항 연산자

JSX 내부에서 조건에 따라 다른 내용을 렌더링할 때 사용합니다.

 

function Component() {
  return (
    <div>
      {조건 ? <p>조건이 참일 때</p> : <p>조건이 거짓일 때</p>}
    </div>
  );
}

jsx

 

간단한 조건부 렌더링을 JSX 안에서 직접 처리할 수 있어 자주 사용됩니다 

---

3. && 연산자를 활용한 조건부 렌더링

조건이 참일 때만 내용을 보여주고, 거짓일 때는 아무것도 표시하지 않을 경우에 사용합니다.

 

function Component() {
  return (
    <div>
      {조건 && <p>조건이 참일 때만 보여집니다</p>}
    </div>
  );
}

 

이 방법은 조건이 거짓일 때 아무것도 렌더링하지 않아야 할 때 매우 간결하게 사용할 수 있습니다 

 

---

4. switch/case 문

여러 조건에 따라 다른 결과를 보여줄 때 사용합니다.

 

function Component() {
  const value = "A";
  
  switch (value) {
    case "A":
      return <p>A입니다</p>;
    case "B":
      return <p>B입니다</p>;
    default:
      return <p>해당하는 값이 없습니다</p>;
  }
}

jsx

 

여러 조건을 처리해야 할 때 if/else if보다 더 깔끔하게 코드를 작성할 수 있습니다 

 

---

5. 변수에 조건부 할당 후 사용

조건에 따라 변수에 다른 값을 할당한 후, 그 변수를 JSX에서 사용합니다.

 

function Component() {
  let content;
  
  if (조건) {
    content = <p>조건이 참일 때 내용</p>;
  } else {
    content = <p>조건이 거짓일 때 내용</p>;
  }
  
  return <div>{content}</div>;
}

jsx

 

복잡한 조건부 렌더링을 JSX 바깥에서 처리하여 가독성을 높일 수 있습니다 

 

---

6. 즉시 실행 함수(IIFE)를 활용한 조건문

JSX 내부에서 복잡한 조건부 로직을 처리할 때 사용합니다.

 

function Component() {
  return (
    <div>
      {(() => {
        if (조건1) {
          return <p>조건1이 참일 때</p>;
        } else if (조건2) {
          return <p>조건2가 참일 때</p>;
        } else {
          return <p>모든 조건이 거짓일 때</p>;
        }
      })()}
    </div>
  );
}

jsx

 

 

이 방법은 JSX 내부에서 복잡한 조건 처리가 필요할 때 사용할 수 있지만, 코드가 복잡해질 수 있어 가독성을 고려해야 합니다.

 

 

 

end