[React.js] 조건부 렌더링 방법 정리

조건부 렌더링 방법 정리

들어가며

• 리액트(React.js)에서의 조건부 렌더링 방법을 정리해본다.

 

조건부 렌더링(Conditional Rendering)

개념

• 특정한 조건에 따라 UI의 일부를 보여주거나 숨기는 방법

 

방법

① 조건부 연산자 / 삼항 연산자(? :)

• 조건부 렌더링을 쉽게 구현할 수 있는 방법
• 조건이 참일 때는 특정 컴포넌트를 렌더링하고, 거짓일 때는 다른 컴포넌트를 렌더링하거나 아무 것도 렌더링하지 않게 할 수 있다.

function Example({ isVisible }) {
  return (
    <div>
      {isVisible ? <p>이 내용은 보입니다!</p> : <p>이 내용은 보이지 않습니다!</p>}
    </div>
  );
}

 

② 논리 연산자(&&)

• 논리 && 연산자를 사용하여 조건이 참일 때만 렌더링하도록 할 수 있다.
• 조건이 거짓일 경우, 아무 것도 렌더링하지 않는다.

function Example({ isVisible }) {
  return (
    <div>
      {isVisible && <p>이 내용은 보입니다!</p>}
    </div>
  );
}

 

③ 삼항 연산자(? :)와 null

• 삼항 연산자(? :)를 사용하여 조건이 참일 때 특정 컴포넌트를 렌더링하고, 거짓일 때 null을 반환할 수 있다.

function Example({ isVisible }) {
  return (
    <div>
      {isVisible ? <p>이 내용은 보입니다!</p> : null}
    </div>
  );
}

 

또는 조건이 거짓일 때 null 대신 false를 반환해도 된다.

 

④ 조건부 렌더링을 함수로 분리하기

• 조건부 렌더링 로직을 함수로 분리하여 코드의 가독성을 높일 수 있다.

function Example({ isVisible }) {
  const renderContent = () => {
    if (isVisible) {
      return <p>이 내용은 보입니다!</p>;
    } else {
      return <p>이 내용은 보이지 않습니다!</p>;
    }
  };
 
  return <div>{renderContent()}</div>;
}

 

⑤ 조건부 렌더링을 컴포넌트로 분리하기

• 조건부 렌더링을 별도의 컴포넌트로 분리하여 재사용성과 관리 편의성을 높일 수 있다.

function VisibleContent() {
  return <p>이 내용은 보입니다!</p>;
}
 
function HiddenContent() {
  return <p>이 내용은 보이지 않습니다!</p>;
}
 
function Example({ isVisible }) {
  return (
    <div>
      {isVisible ? <VisibleContent /> : <HiddenContent />}
    </div>
  );
}

 

⑥ switch 문

• 복잡한 조건부 렌더링이 필요할 때는 switch 문을 사용할 수 있다.

function Example({ status }) {
  const renderContent = () => {
    switch (status) {
      case 'loading':
        return <p>로딩 중...</p>;
      case 'error':
        return <p>오류가 발생했습니다.</p>;
      case 'success':
        return <p>성공적으로 로드되었습니다!</p>;
      default:
        return <p>상태를 알 수 없습니다.</p>;
    }
  };
 
  return <div>{renderContent()}</div>;
}

 

⑦ && 연산자와 null 

• && 연산자를 사용하고, 기본적으로 아무 것도 렌더링하지 않도록 설정할 수 있다.

function Example({ isVisible }) {
  return (
    <div>
      {isVisible && <p>이 내용은 보입니다!</p>}
    </div>
  );
}

 

 

⑧ ?? 연산자와 null

• ?? 연산자는 Nullish 병합 연산자(Nullish Coalescing Operator)로 좌항의 값이 null 또는 undefined일 경우 우항의 값을 표시한다.

			
			
			
		
function Example() {
    const [isVisible, setIsVisible] = useState();
 
    {isVisible ?? (
        <p>이 내용은 보입니다!</p>
    )}
}

 

참고 사이트

Conditional Rendering – React