조건부 렌더링은 React에서 가장 일반적으로 사용되는 것 중 하나입니다.
애플리케이션이 성장하고 상황이 복잡해지면 조건부 렌더링 문이 가독성이 떨어질 수 있습니다.
이 글에서는 React에서 멋진 조건문을 쉽게 작성하는 방법에 대해 설명하겠습니다.
일반적인 조건부 렌더링 기법
다음은 React 컴포넌트에서 조건부 렌더링을 적용할 때 사용되는 몇 가지 기법입니다:
&& 사용
조건부 렌더링에 가장 일반적으로 사용되는 기법 중 하나입니다.
이 기법은 예측할 수 없는 버그를 유발할 수 있으므로 매우 신중하게 사용해야 한다는 점을 기억하는 것이 중요합니다.
If/Else 문 사용
React에서 조건부 렌더링을 위한 또 다른 기법은 if/else 문을 사용하는 것입니다.
확인해야 할 조건이 여러 개일 경우 컴포넌트 코드가 복잡해질 수 있습니다.
삼항 연산자 사용하기
삼항 연산자는 React에서 조건부 렌더링에 자주 사용되는 기법입니다.
삼항 연산자 사용의 문제점은 확인해야 할 조건이 여러 개일 때 중첩된 삼항 연산자를 사용하게 된다는 것입니다.
이는 코드를 가독성을 떨어뜨리고 복잡하게 만들 수 있습니다.
깔끔한 조건문 작성하기
React에서 멋진 조건문을 작성할 수 있는 간단하고 작은 React 컴포넌트인 <ReactWhen />을 소개합니다.
이 컴포넌트를 사용하면 React에서 가독성 높은 조건부 렌더링 코드를 빠르게 작성할 수 있습니다.
단일 조건을 테스트해야 하든 일련의 조건을 테스트해야 하든 <RenderWhen />으로 할 수 있습니다.
<RenderWhen /> 컴포넌트는 if/else 및 switch/대소문자 문과 유사하게 작동합니다.
이를 통해 React에서 조건부 렌더링을 위한 일련의 조건을 확인할 수 있습니다.
위의 예시에서 코드는 요일에 따라 메시지를 표시합니다.
마지막 조건은 항상 참이지만, 위의 모든 조건이 실패할 때만 렌더링됩니다.
스위치/대/소문자 기본 문과 똑같이 작동합니다.
<RenderWhen /> 컴포넌트는 isTrue 프로퍼티를 허용하므로 중첩된 조건을 구현할 수 있습니다.
즉, 모든 자식 조건은 <RenderWhen />에 전달된 조건이 참으로 평가될 때만 검사됩니다.
원문 : React Beautiful Conditional Rendering With <RenderWhen />
'카테고리 없다' 카테고리의 다른 글
| 8가지 일반적인 자바스크립트 ES6 기법 (0) | 2023.06.20 |
|---|---|
| 알아야 할 2023년 리액트 네이티브 트렌드(한글번역) (0) | 2023.05.19 |
| 서버 분리의 이유와 장점 (0) | 2023.05.10 |
| 프론트엔드 앱을 위한 13 가지 보안 팁(한글번역) (0) | 2023.05.08 |
