ReactJS에서 탭을 만드는 방법은 무엇입니까?

ReactJS는 사용자 인터페이스 구축에 널리 사용되는 JavaScript 라이브러리입니다. 이는 대화형 및 동적 UI 요소를 보다 쉽게 ​​생성할 수 있도록 웹 개발에 대한 구성 요소 기반 접근 방식을 제공합니다. 탭은 사용자 친화적인 방식으로 콘텐츠를 구성하고 표시하는 데 사용되는 일반적인 UI 패턴입니다. 이 기사에서는 ReactJS에서 탭 구성 요소를 만드는 방법을 살펴보겠습니다.

전제조건

이 글을 읽기 전에 ReactJS와 핵심 개념에 대한 기본적인 이해가 있어야 합니다. Node.js와 npm(노드 패키지 관리자)이 컴퓨터에 설치되어 있는지 확인하세요.

새 React 프로젝트 설정

먼저 기본 프로젝트 구조로 새로운 React 프로젝트를 생성하는 데 도움을 주는 도구인 Create React App을 사용하여 새로운 React 프로젝트를 생성해 보겠습니다. 터미널을 열고 다음 명령을 실행하세요:

으아악

방법 1: UseRef Hook 사용

useRef 후크는 구성 요소의 요소에 대한 변경 가능한 참조를 생성할 수 있는 내장 React 후크입니다. 이를 사용하여 탭 구성 요소의 활성 탭 상태를 관리할 수 있습니다.

예

아래 코드에서는 먼저 필요한 종속성을 가져오고 기능 구성 요소 탭을 설정합니다. 구성 요소 내에서 tabsRef라는 useRef 후크를 생성하여 탭 개체 배열을 저장합니다. 이를 통해 탭과 해당 속성을 참조할 수 있습니다. 또한 현재 활성 탭을 추적하기 위해 useState 후크를 사용하여 activeTab이라는 상태 변수를 생성합니다. handlerTabClick 함수는 탭을 클릭할 때 activeTab 상태를 업데이트하는 역할을 합니다. renderTabs 함수는 tabsRef.current 배열을 반복하고 탭 제목을 렌더링합니다. 현재 활성 탭에 "활동" 클래스를 추가합니다. 마지막으로 탭 및 활성 탭 콘텐츠에 대한 JSX 마크업을 반환합니다.

으아악

출력

방법 2: useReducer 후크 사용

useReducer 후크는 복잡한 상태 로직을 보다 체계적으로 관리하는 방법을 제공하는 또 다른 내장 React 후크입니다. 이 후크를 활용하여 탭의 상태 변경을 처리할 수 있습니다.

예

아래 코드에서는 빈 "tabs" 배열로 상태 개체를 초기화하고 "activeTab" 속성을 0으로 설정합니다. 상태 개체를 적절하게 초기화함으로써 "state.tabs" 배열이 정의되지 않았는지 확인하고 이를 매핑하고 탭 개체 및 해당 속성에 액세스할 수 있습니다.

"tab-content" div에 사용된 "?.content" 구문은 현재 탭 개체가 정의된 경우에만 콘텐츠 속성에 액세스하도록 보장합니다. 이렇게 하면 탭을 전환할 때 오류가 발생하지 않습니다.

특정 디자인 요구 사항에 따라 탭 제목 및 콘텐츠 표시를 사용자 정의할 수 있습니다.

으아악

출력

방법 3: 상태 및 소품 사용

세 번째 방법은 구성 요소의 상태와 속성을 사용하여 활성 탭을 관리하는 것입니다. 이 방법은 탭 논리가 너무 복잡하지 않은 간단한 경우에 더 적합합니다.

예

아래 코드에서는 탭 제목과 내용에 필요한 데이터를 제공하기 위해 탭 구성 요소에 "탭" 배열을 정의합니다. 구성 요소 내에서 "탭" 배열을 정의함으로써 구성 요소 범위 내에서 액세스할 수 있도록 보장합니다. useState 후크는 초기 값이 0으로 설정된 활성 탭 상태를 관리하는 데 사용됩니다. handlerTabClick 함수는 탭을 클릭할 때 활성 탭을 업데이트합니다. renderTabs 함수는 "탭" 배열을 매핑하고 탭 제목을 렌더링합니다. "active" 클래스는 activeTab 상태에 따라 활성 탭에 적용됩니다.

탭 콘텐츠 div는 현재 활성화된 탭의 콘텐츠를 표시합니다.

으아악

출력

결론

이 기사에서는 Reactjs에서 탭을 만드는 방법에 대해 논의했습니다. useRef 후크는 변경 가능한 참조를 관리하는 데 유용하고, useReducer 후크는 상태 관리에 대한 보다 구조화된 접근 방식을 제공하며, 상태 및 props 메서드는 간단한 탭 구현에 적합하다는 점을 소개했습니다. 이러한 기술을 이해하면 React 애플리케이션에서 대화형의 사용자 친화적인 탭 구성 요소를 만들 수 있습니다.

위 내용은 ReactJS에서 탭을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!