ReactJS에서 스위치를 만드는 방법은 무엇입니까?

ReactJS는 대화형 구성 요소를 개발하는 효율적인 방법을 제공하는 사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리입니다. 토글 스위치는 사용자가 웹 애플리케이션에서 어두운 모드와 밝은 모드 테마 사이를 전환할 수 있도록 하는 데 자주 사용됩니다. 토글을 사용하여 페이지의 특정 콘텐츠나 부분을 표시하거나 숨길 수도 있습니다. 이 기사에서는 ReactJS를 사용하여 토글을 만드는 방법을 살펴보겠습니다.

전제조건

본 튜토리얼을 진행하기 전, 여러분이 ReactJS에 대한 기본적인 이해를 갖고 있으며, Node.js와 npm이 설치된 개발 환경을 구축했다고 가정합니다.

React 애플리케이션 설정 및 필수 라이브러리 설치

먼저 Create React App을 사용하여 새로운 React 애플리케이션을 만들어 보겠습니다. 명령 프롬프트를 열고 다음 명령을 실행하세요:

으아악

이 명령은 "toggle-slider-switch"라는 새 디렉토리를 생성하고 그 안에 기본 React 애플리케이션을 설정합니다. 프로젝트 디렉터리로 이동하려면 다음 명령을 작성하세요.

으아악

2단계: ToggleSlider 구성 요소 만들기

프로젝트의 src 디렉터리에 ToggleSlider.js라는 새 파일을 만듭니다. 이 파일에는 토글 슬라이더 구성 요소 코드가 포함됩니다. 즐겨 사용하는 텍스트 편집기에서 ToggleSlider.js 파일을 열고 다음 코드를 추가하세요.

예

아래 코드에서는 React에서 useState 후크를 가져왔고 이를 통해 기능적 구성 요소의 상태를 처리할 수 있습니다. 확인된 변수를 사용하여 스위치 상태를 유지하는 ToggleSlider 구성 요소를 정의합니다. handlerToggle 함수는 스위치를 클릭할 때 상태를 업데이트하는 역할을 합니다.

으아악

3단계: 토글 슬라이더 스타일 지정

동일한 디렉터리(src)에 ToggleSlider.css라는 새 파일을 만듭니다. 토글 슬라이더의 스타일을 지정하려면 다음 CSS 코드를 추가하세요.

예

아래 코드에서 CSS 코드는 스위치와 슬라이더 핸들을 포함하여 토글 슬라이더의 스타일을 지정합니다. input[type='checkbox']가 숨겨져 있으면 레이블을 사용하여 전환 효과를 트리거합니다.

으아악

4단계: ToggleSlider 구성 요소 구현

다음으로 ToggleSlider 구성 요소를 포함하도록 src 디렉터리의 App.js 파일을 수정해 보겠습니다. App.js 파일을 열고 다음 코드로 내용을 업데이트하세요

예

아래 코드에서는 ToggleSlider 구성 요소를 가져와서 App 구성 요소에 렌더링합니다. 그러면 화면에 토글 슬라이더가 표시됩니다.

으아악

5단계: React 앱 실행

이제 토글 스위치 애플리케이션을 실행할 수 있습니다. 명령 프롬프트에서 프로젝트의 루트 디렉터리에 있는지 확인합니다(슬라이더 스위치 전환). 다음 명령을 실행하여 React 개발 서버를 시작하세요:

컴파일 프로세스가 완료되면 기본 브라우저가 열리고 화면에 토글 슬라이더와 함께 "토글 슬라이더 예"라는 제목이 표시됩니다.

으아악

6단계: 토글 슬라이더 테스트

토글 슬라이더를 클릭하면 상태가 전환되고 모양이 변경됩니다. ToggleSlider 구성 요소의 초기 상태는 "false"로 설정되어 있으므로 슬라이더를 클릭하면 파란색으로 바뀌어 "true" 상태를 나타냅니다. 다시 클릭하면 초기 상태로 돌아갑니다.

출력

으아악

결론

이 기사에서는 Reactjs에서 스위치를 만드는 방법에 대해 논의했습니다. 우리는 React 애플리케이션 설정, 토글 슬라이더 구성 요소 생성, 슬라이더 스타일 지정, 구성 요소 구현 및 애플리케이션 실행의 단계별 프로세스를 다루었습니다. 이 가이드를 따르면 이제 ReactJS 애플리케이션에 기능 토글 슬라이더 스위치가 있어 추가 사용자 정의 및 프로젝트 통합이 가능해집니다.

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