지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 재사용 가능한 반응 구성 요소를 만드는 실용적인 가이드

재사용 가능한 반응 구성 요소를 만드는 실용적인 가이드

Christopher Nolan
풀어 주다： 2025-02-09 12:46:16
원래의
693명이 탐색했습니다.

재사용 가능한 반응 구성 요소를 만드는 실용적인 가이드 React는 세계에서 가장 인기 있고 가장 많이 사용되는 프론트 엔드 프레임 워크 중 하나이지만, 많은 개발자들은 재사용 가능성을 향상시키기 위해 코드를 리팩토링하는 데 여전히 어려움을 겪고 있습니다. React 앱 전체에서 동일한 코드 스 니펫을 반복하는 것을 발견 한 적이 있다면 올바른 기사를 찾을 수 있습니다.

. 이 튜토리얼에서는 재사용 가능한 반응 구성 요소를 구축 할 때가되었다는 세 가지 가장 일반적인 지표를 소개합니다. 그런 다음 재사용 가능한 레이아웃과 두 개의 흥미로운 반응 후크를 구축하여 실용적인 데모를 계속 살펴 보겠습니다.

읽기가 끝날 때까지,

> 재사용 가능한 반응 구성 요소를 만드는 것이 적절할 때

를 스스로 알아낼 수있을 것입니다. 🎜> 이 기사는 React 및 React 후크에 대한 기본 지식을 가정합니다. 이 주제를 닦으려면 "React 시작"가이드와 "고리를 반응하기위한 연애"를 확인하는 것이 좋습니다. 키 테이크 아웃

재사용 가능성 식별 :이 기사는 재사용 가능한 반응 구성 요소를 생성 할 필요성을 나타내는 세 가지 일반적인 징후를 소개합니다 : 래퍼를위한 반복적 인 CSS 스타일, 동일한 이벤트 리스너의 빈번한 사용 및 동일한 그래프 QL 쿼리 또는 돌연변이의 반복 된 구현. 이 지침은 개발자가 반복적 인 코드를 재사용 가능한 구성 요소로 추상화 할 수있는시기를 인식하여 응용 프로그램의 유지 관리 및 확장 성을 향상시킵니다. 실제 데모 및 구현 : 자세한 예제를 통해이 기사는 레이아웃 구성 요소, 이벤트 리스너 관리를위한 사용자 정의 반응 후크 및 GraphQL 쿼리의 후크를 포함하여 재사용 가능한 구성 요소를 구축하는 데 실용적인 데모를 제공합니다. 이 예제는 개발자가 따라갈 수있는 청사진 역할을하여 자체 프로젝트에 유사한 패턴을 적용하여 개발을 간소화하고 응용 프로그램 전체에서 일관성을 보장 할 수 있습니다. 코드 효율성 및 프로젝트 확장 성 향상 : 자습서는 코드 복제 감소, 프로젝트 유지 보수 단순화 및 확장 성 향상과 같은 재사용성에 대한 리팩토링의 이점을 강조합니다. 설명 된 관행을 채택함으로써 개발자는보다 효율적이고 깨끗하며 모듈 식 React Applications를 만들 수있어 궁극적으로 개발주기가 빠르고 강력한 소프트웨어 솔루션으로 이어질 수 있습니다.

재사용 가능한 반응 구성 요소의 상단 3 개의 지표 먼저

가이 작업을하고 싶을 때
    의 일부 표시를 살펴 보겠습니다.
  1. 동일한 CSS 스타일의 래퍼의 반복적 인 생성 재사용 가능한 구성 요소를 만드는시기를 아는 가장 좋아하는 표시는 동일한 CSS 스타일을 반복적으로 사용하는 것입니다. 이제 "잠깐만 요 : 왜 같은 CSS 스타일을 공유하는 요소에 동일한 클래스 이름을 할당하지 않습니까?" 당신은 절대적으로 옳습니다. 다른 구성 요소의 일부 요소가 같은 스타일을 공유 할 때마다 재사용 가능한 구성 요소를 만드는 것은 좋은 생각이 아닙니다. 실제로, 그것은 불필요한 복잡성을 유발할 수 있습니다. 그래서 당신은 스스로에게 한 가지 더 물어봐야합니다 :이 스타일의 요소는 포장지

    ? 입니다. 예를 들어 다음 로그인 및 가입 페이지를 고려하십시오

    동일한 스타일이 컨테이너 (
    요소)와 각 구성 요소의 바닥 글에 적용됩니다. 따라서이 경우 재사용 가능한 구성 요소 두 가지 ( 및 )를 생성하고 어린이를 소품으로 전달할 수 있습니다. 예를 들어 로그인 구성 요소는 다음과 같이 리팩토링 될 수 있습니다.

    결과적으로, 당신은 더 이상 여러 페이지에서 common.css를 가져 오거나 모든 것을 감싸기 위해 동일한

    요소를 만들 필요가 없습니다. 이벤트 리스너의 반복적 인 사용 이벤트 리스너를 요소에 첨부하려면 다음과 같이 useeffect () 내부에서 처리 할 수 ​​있습니다. 
    <span>// Login.js
</span><span>import './common.css';
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    다음 버튼 구성 요소에서 보여지는 것처럼 또는 이와 같이 JSX 내부에서 직접 수행 할 수 있습니다. 
    <span>// SignUp.js
</span><span>import './common.css';
</span>
<span>function <span>Signup</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    문서 또는 창에 이벤트 리스너를 추가하려면 첫 번째 방법으로 가야합니다. 그러나 이미 실현 된 바와 같이, 첫 번째 메소드는 useeffect (), addeventListener () 및 removeEventListener ()를 사용하여 더 많은 코드가 필요합니다. 따라서 그러므로 사용자 정의 후크를 작성하면 구성 요소가 더 간결 할 수 있습니다.

    이벤트 리스너를 사용하기위한 4 가지 가능한 시나리오가 있습니다 :

    동일한 이벤트 리스너, 동일한 이벤트 핸들러 
    <span>// Login.js
</span><span>import <span>Footer</span> from "./Footer.js";
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span>
</span>  <span>);
</span><span>} 
</span>
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    동일한 이벤트 리스너, 다른 이벤트 핸들러 다른 이벤트 리스너, 동일한 이벤트 핸들러 다른 이벤트 리스너, 다른 이벤트 핸들러 첫 번째 시나리오에서는 이벤트 리스너와 이벤트 핸들러가 모두 정의되는 후크를 만들 수 있습니다. 다음 후크를 고려하십시오 :

    그런 다음 다음과 같이 구성 요소 에서이 후크를 사용할 수 있습니다.

    다른 세 가지 시나리오의 경우, 이벤트를받는 후크와 이벤트 처리 기능을 소품으로 만드는 것이 좋습니다. 예를 들어, KeyDown 및 HandleKeyDown을 사용자 정의 후크에 소품으로 전달합니다. 다음 후크를 고려하십시오 : 
    <span>// App.js
</span><span>import <span>{ useEffect }</span> from 'react';
</span>
<span>function <span>App</span>() {
</span>  <span>const handleKeydown = () => {
</span>    <span>alert('key is pressed.');
</span>  <span>}
</span>
  <span>useEffect(() => {
</span>    <span>document.addEventListener('keydown', handleKeydown);
</span>    <span>return () => {
</span>      <span>document.removeEventListener('keydown', handleKeydown);
</span>    <span>}
</span>  <span>}, []);
</span>
  <span>return (...);
</span><span>}
</span>
    로그인 후 복사
    그런 다음 다음과 같이 모든 구성 요소 에이 후크를 사용할 수 있습니다.
    <span>// Login.js
</span><span>import './common.css';
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    동일한 GraphQL 스크립트의 반복적 인 사용

    그래프 QL 코드를 재사용 할 수있는 표지판을 찾을 필요는 없습니다. 복잡한 응용 프로그램의 경우 쿼리 또는 돌연변이를위한 GraphQL 스크립트는 요청해야 할 속성이 많기 때문에 30-50 줄의 코드를 쉽게 가져옵니다. 동일한 GraphQL 스크립트를 한두 번 이상 사용하고 있다면 자체 사용자 지정 후크가 필요하다고 생각합니다.

    다음 예를 고려하십시오

    백엔드에서 게시물을 요청하는 모든 페이지 에서이 코드를 반복하는 대신이 특정 API에 대한 React Hook를 만들어야합니다.

    세 가지 재사용 가능한 반응 구성 요소를 구축합니다 이제

    의 공통 징후를 보았으므로

    > RECT 응용 프로그램 전체에서 공유 할 수있는 새로운 구성 요소를 만들 때 해당 지식을 실천하고 세 가지 실용적인 데모를 구축하겠습니다. 
    <span>// SignUp.js
</span><span>import './common.css';
</span>
<span>function <span>Signup</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    1. 레이아웃 구성 요소 React는 일반적으로 복잡한 웹 앱을 구축하는 데 사용됩니다. 이것은 많은 페이지를 React에서 개발해야한다는 것을 의미하며, 앱의 모든 페이지마다 다른 레이아웃이있을 것이라고 의심합니다. 예를 들어, 30 페이지로 구성된 웹 앱은 일반적으로 5 가지 미만의 레이아웃을 사용합니다. 따라서 여러 다른 페이지에서 활용할 수있는 유연하고 재사용 가능한 레이아웃을 구축하는 것이 필수적입니다. 이것은 당신에게 매우 많은 코드 라인과 결과적으로 엄청난 시간을 절약 할 것입니다.

    . 다음 반응 기능 구성 요소를 고려하십시오

    이것은
    , a
    및 a
    가있는 일반적인 웹 페이지입니다. 이와 같은 30 개의 웹 페이지가 더 있으면 HTML 태그를 반복적으로 작성하고 같은 스타일을 반복해서 적용하는 데 쉽게 지쳐 질 것입니다. 대신 다음 코드에서와 같이
    ,
    및 를 소품으로 수신하는 레이아웃 구성 요소를 만들 수 있습니다. 
    <span>// Login.js
</span><span>import <span>Footer</span> from "./Footer.js";
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span>
</span>  <span>);
</span><span>} 
</span>
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    이 구성 요소는
    및
    가 필요하지 않습니다. 따라서 헤더 또는 바닥 글을 포함하는지 여부에 관계없이 페이지에 동일한 레이아웃을 사용할 수 있습니다. 이 레이아웃 구성 요소를 사용하면 피드 페이지를 훨씬 더 정교한 코드 블록으로 바꿀 수 있습니다.

    끈적 끈적한 요소가있는 레이아웃을 생성하기위한 프로 팁 많은 개발자들이 위치를 사용하는 경향이 있습니다 : 고정 또는 위치 : 뷰포트 상단에 헤더를 붙이고 싶을 때 절대적으로 또는 바닥 글을 바닥에 바닥에 넣을 때 절대. 그러나 레이아웃의 경우 피해야합니다.

    레이아웃의 요소는 전달 된 소품의 상위 요소가되므로 레이아웃 요소의 스타일을 최대한 간단하게 유지하려고합니다. 의도 한대로. 따라서 위치 적용 : 고정 및 디스플레이 : 레이아웃의 가장 바깥 쪽 요소로 가득 차고 오버플로 설정 :
    요소로 스크롤하십시오. 예는 다음과 같습니다. 

    <span>// Login.js
</span><span>import './common.css';
</span>
<span>function <span>Login</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    이제 피드 페이지에 스타일을 적용하고 건설 한 내용을 확인해 봅시다.

    스티커 헤더 및 바닥 글 데모

    그리고 다음은 작동중인 코드입니다. 
    <span>// SignUp.js
</span><span>import './common.css';
</span>
<span>function <span>Signup</span>() {
</span>  <span>return (
</span>    <span><span><span><div</span> className<span>='wrapper'</span>></span>
</span><span>      <span><span><main</span>></span>
</span><span>        {...}
</span><span>      <span><span></main</span>></span>
</span><span>      <span><span><footer</span> className<span>='footer'</span>></span>
</span><span>        {...}
</span><span>      <span><span></footer</span>></span>
</span><span>    <span><span></div</span>></span>
</span>  <span>);
</span><span>}
</span>
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사

    이것은 데스크탑 화면에서 보이는 것입니다.

    이것은 모바일 화면에서 보이는 것입니다.

    이 레이아웃은 iOS 장치에서도 의도 된대로 작동합니다! 모르는 경우 iOS는 웹 앱 개발에 예기치 않은 위치 관련 문제를 가져 오는 것으로 악명이 높습니다. 다음 코드를 세분화하겠습니다

    acesscrollsaver 후크는 위의 레이아웃의
    컨테이너와 같은 스크롤 가능한 컨테이너와 PageUrl이라는 두 가지 항목을 수신해야한다는 것을 알 수 있습니다. 여러 페이지의 스크롤 위치를 저장할 수 있습니다 1 단계 : 스크롤 위치를 저장

    우선, 스크롤 가능한 컨테이너에 "스크롤"이벤트 리스너를 바인딩해야합니다.

위 내용은 재사용 가능한 반응 구성 요소를 만드는 실용적인 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

이전 기사：마이크로 프론트 엔드 사용의 5 가지 함정과 피하는 방법 다음 기사：빠른 팁 : JavaScript에서 숫자를 조례로 변환하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2708
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2833
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
2388
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
2280
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
2357
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿