조건부 렌더링은 React에서 가장 일반적으로 사용되는 것 중 하나입니다. 응용 프로그램이 커지고 상황이 복잡해짐에 따라 조건부 렌더링 문을 읽기가 어려워질 수 있습니다. 이 기사에서는 React에서 아름다운 조건문을 쉽게 작성하는 방법에 대해 설명합니다.

일반적인 조건부 렌더링 기술

다음은 React 구성 요소에서 조건부 렌더링을 적용하는 동안 사용되는 몇 가지 기술입니다.

&& 사용

조건부 렌더링에 가장 일반적으로 사용되는 기술 중 하나입니다. 이 기술은 예측할 수 없는 버그로 이어질 수 있으므로 매우 신중하게 사용해야 한다는 점을 기억하는 것이 중요합니다.

If/Else 문 사용

React에서 조건부 렌더링을 위한 또 다른 기술은 if/else 문을 사용하는 것입니다. 확인할 조건이 여러 개인 경우 복잡한 구성 요소 코드가 생성될 수 있습니다.

삼항 연산자 사용

삼항 연산자는 React에서 조건부 렌더링에 사용되는 널리 사용되는 기술입니다. 삼항 연산자를 사용할 때의 문제점은 확인할 조건이 여러 개인 경우 중첩 삼항 연산자를 사용하게 된다는 것입니다. 코드를 덜 읽기 쉽고 복잡하게 만들 수 있습니다.

깨끗한 조건문 작성

React에서 아름다운 조건문을 작성할 수 있게 해주는 간단하고 작은 React 구성 요소 인 을 소개 합니다. React에서 읽기 쉬운 조건부 렌더링 코드를 빠르게 작성할 수 있습니다. 단일 조건을 테스트해야 하는지 또는 일련의 조건을 테스트해야 하는지 여부에 관계없이 을 사용하여 테스트할 수 있습니다 .

구성 요소는 if/else 및 switch/case 문과 유사하게 작동합니다. React에서 조건부 렌더링에 대한 일련의 조건을 확인할 수 있습니다.

위의 예에서 코드는 요일을 기준으로 메시지를 표시합니다. 마지막 조건은 항상 참이지만 위의 모든 조건이 실패한 경우에만 렌더링됩니다. switch/case default 문과 똑같이 작동 합니다.

구성 요소는중첩된 조건을 구현할 수 있도록 isTrue 소품을 허용합니다. 이는 에 전달된 조건 이 true로 평가되는 경우에만 모든 자식 조건이 확인됨을 의미합니다.

여기 GitHub에서 이 작은 React 구성 요소를 확인 하십시오 .

구성 가능한 웹 애플리케이션 빌드

웹 모놀리식을 구축하지 마십시오. Bit 를 사용 하여 React 또는 Node.js와 같은 선호하는 프레임워크에서 분리된 소프트웨어 구성 요소를 만들고 구성하십시오. 강력하고 즐거운 개발 경험을 통해 확장 가능한 모듈식 애플리케이션을 구축하세요.

팀을 Bit Cloud 로 가져와 구성 요소를 함께 호스팅하고 협업하고 팀으로서 개발 속도를 높이고 확장하고 표준화하십시오. 디자인 시스템 또는 마이크로 프런트 엔드 로 구성 가능한 프런트엔드 를 시도 하거나 서버 측 구성 요소로 구성 가능한 백엔드 를 탐색하십시오 .

시도해 보세요 →

더 알아보기