집 > 기사 > 웹 프론트엔드 > TypeScript와 함께 React를 사용하는 조건부 속성

TypeScript와 함께 React를 사용하는 조건부 속성

WBOY앞으로: 2023-09-05 17:29:071317검색

React with TypeScript에서는 조건부 렌더링을 사용하여 조건에 따라 렌더링할 대상을 선택할 수 있습니다. 이는 특정 기준에 따라 다양한 콘텐츠나 구성 요소를 표시할 때 유용합니다. TypeScript를 사용하여 React에서 조건부 렌더링을 구현하는 몇 가지 방법이 있습니다. 한 가지 방법은 조건 연산자(삼항 연산자라고도 함)를 사용하는 것입니다. 이 연산자는 조건을 승인하고 조건이 참이면 값을 반환하고, 조건이 거짓이면 다른 값을 반환합니다.

&& 연산자를 사용하여 조건에 따라 구성 요소를 조건부로 렌더링할 수도 있습니다. 연산자의 왼쪽 값이 true이면 연산자는 true로 평가되고, 연산자 왼쪽의 값이 false이면 연산자는 false로 평가됩니다.

조건부 렌더링을 구현하는 또 다른 방법은 스위치 문을 사용하는 것입니다. 이를 통해 여러 조건에 대한 값을 테스트하고 해당 값과 일치하는 조건에 따라 다양한 코드 블록을 실행할 수 있습니다.

일반적으로 조건부 렌더링을 구현할 때는 요구 사항을 충족하는 가장 간단한 방법을 사용하는 것이 가장 좋습니다. 이렇게 하면 코드를 더 쉽게 읽고 이해할 수 있습니다.

조건부 속성

React에서 속성은 상위 구성 요소의 데이터를 하위 구성 요소로 전달합니다. 조건부 속성은 특정 조건에서만 구성 요소에 설정됩니다.

React와 함께 TypeScript를 사용하면 코드 유형을 확인하고 구성 요소가 수신할 것으로 예상되는 속성에 대한 유형 정의를 제공할 수 있습니다. 이렇게 하면 오류를 포착하고 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다.

TypeScript를 사용하여 React 구성 요소에서 조건부 속성을 생성하려면 "if" 문이나 삼항 연산자를 사용하여 조건에 따라 속성 값을 설정할 수 있습니다. 예를 들어 "색상" 속성이 필요한 구성 요소가 있지만 특정 조건이 충족될 때만 "색상" 속성을 설정하려고 할 수 있습니다. 이 경우 조건문을 사용하여 조건이 만족되는 경우에만 'color' 속성을 설정할 수 있습니다.

예시 단계

다음 명령을 사용하여 새로운 React TypeScript 프로젝트를 만듭니다 -

으아아아

React 프로젝트의 src 폴더에 "MyComponent.tsx"라는 이름의 "MyComponent"라는 새 구성 요소를 만듭니다.
그런 다음 React에서 TypeScript 데이터 규칙을 사용하도록 Props 인터페이스를 정의해야 합니다.
삼항 연산자 또는 && 연산자를 사용하여 전달된 속성을 조건부로 표시할 수 있습니다.
"App.tsx"에서 MyComponent를 가져와 여러 번 사용합니다. 서로 다른 속성값을 갖는 컴포넌트를 사용하고 웹페이지에서 결과를 확인합니다.

예

이 예에서는 React 및 TypeScript를 사용하여 조건부 속성을 보여줍니다. 소품을 통해 MyComponent의 속성 값을 가져옵니다. "userId"와 "username"이라는 두 가지 속성을 사용합니다. 논리적으로 useId가 0이 아닌 경우 삼항 연산자를 사용하여 웹 페이지에 userId를 표시하려고 시도하고 사용자 이름이 빈 문자열이 아닌 경우에만 && 연산자를 사용하여 사용자 이름을 표시합니다.

App.tsx

으아아아

MyComponent.tsx

으아아아

출력

예

이 예에서는 조건부 속성을 보다 효율적이고 대화형으로 볼 수 있습니다. 웹 페이지에 메시지와 데이터를 표시하기 위해 사용자 입력을 허용합니다. 우리는 "showMessgae", "showAlert" 및 "count"라는 세 가지 속성을 사용합니다. 논리적으로 우리는 사용자가 트리거한 이벤트를 사용하여 MyComponent에서 이러한 속성을 동적으로 전달합니다. App.tsx에는 "메시지 표시", "경고 표시", "카운트 증가" 및 "카운트 감소"라는 네 개의 버튼이 있습니다. 또한 App.tsx에는 메시지 표시, 경고 표시 및 카운터 값 저장을 위한 몇 가지 상태가 있습니다. 논리적으로 우리는 MyComponent의 속성을 변경하기 위해 상태를 전환하고 있습니다.

App.tsx

으아아아

MyComponent.tsx

으아아아