React 연결을 사용하여 재사용 가능한 UI 구성 요소 구축

작성자 Peter Ekene Eze✏️
React에서 재사용 가능한 구성 요소는 UI의 일부분으로 응용 프로그램의 각 부분에서 여러 UI 실례를 구축하는 데 사용할 수 있습니다.예를 들어, 우리는 응용 프로그램의 몇 부분에서 서로 다른 색의 단추 구성 요소를 사용하여 표시할 수 있다.색상 또는 함수와 같은 데이터 세트를 제공할 때 같은 버튼 구성 요소이지만 요소를 수정하고 출력하는 UI 인스턴스입니다.
이 React 구성 요소를 만드는 모드는 배율을 조정하는 데 필요합니다.그것은 더 적은 코드를 작성하고, 더 빠른 개발 속도, 더 간단한 코드 라이브러리, 압력 없는 유지보수를 확보함으로써 시간을 절약하는 데 도움을 준다.
이 강좌에서, 우리는 논리와 표현의 일치성을 유지하기 위해 전체 프로젝트에서 사용할 수 있는 React 구성 요소를 구축할 것입니다.우리는 갈고리를 사용하여 상태 데이터를 관리하고 조작할 것이다.

This post assumes you that you have a basic understanding of React. If you don’t have any experience using React, you can refer to the documentation here to get started. All the examples used in this project is available on this sandbox.

입문

이 강좌의 이 부분에서, 우리는 여러 가지 HTML 요소를 다시 사용할 수 있는 구성 요소로 만들 것입니다.우리는 CodeSandbox를 사용할 것이다.새 샌드박스 here 를 만들어서 시작할 수 있습니다.

어셈블리 가져오기

재사용 가능한 입력 구성 요소를 만드는 장점 중 하나는 응용 프로그램의 각 부분에서 입력의 외관을 유지할 수 있다는 것이다.도구를 전달하여 어떤 유형의 입력 구성 요소 (텍스트, 전자 우편 등) 를 보여야 하는지 확인할 수 있습니다.비록 이 강좌에서 우리는 스타일을 깊이 있게 토론하지는 않지만, 당신은 당신의 시각적 수요를 만족시키기 위해 구성 요소를 사용자 정의할 수 있습니다.
새로 만든 샌드박스 프로젝트에서 FormInput.js 파일을 포함하는 components 폴더를 만들고 다음 코드를 추가합니다.

// ./components/FormInput.js
import React, {useState} from "react";

function FormInput(props) {
  const [inputType] = useState(props.type)
  const [inputValue, setInputValue] = useState('')

  function handleChange(event){
    setInputValue(event.target.value);
    if(props.onChange) props.onChange(inputValue)
  }
  return (
    <>
      <input type={inputType} value={inputValue} name="input-form" onChange={handleChange} class="inputclass"/>
    </>
  );
}
export default TextInput;

구성 요소를 다시 사용할 수 있도록 데이터나 데이터 집합을 수신하고 출력 (일반적으로props를 통해 전달되는 함수) 을 되돌려야 합니다.어셈블리의 상태 속성에 소프트 상태를 유지하여 제대로 작동하는지 확인하는 것이 좋습니다.
위의 FormInput() 구성 요소는 입력 유형을 수신하여 표시할 입력 요소의 유형 (이메일, 텍스트 등) 을 결정합니다.입력에서 되돌아오는 값을 수신하는 방법onChange()도 사용한다.
구성 요소는 로컬에서 값을 관리하고 업데이트된 상태 값만 호출된 구성 요소에 되돌려줍니다.
이를 실현하기 위해 우리는 국부 함수handleChange()를 만들었다.이 함수는props를 통해 상태 데이터를 수신하는 방법이 사용할 수 있는지 확인한 다음 현재 상태 데이터를props에 전송하여 진일보한 처리를 합니다.

사용자 정의 선택 구성 요소

components 폴더에 CustomSelect.js 파일을 만들고 다음 코드를 추가합니다.

// ./components/CustomSelect.js
import React, { useState } from "react";
function CustomSelect(props) {
  const [data] = useState(props.data);
  const [selectedData, updateSelectedData] = useState("");
  function handleChange(event) {
    updateSelectedData(event.target.value);
    if (props.onSelectChange) props.onSelectChange(selectedData);
  }
  let options = data.map(data => (
    <option key={data.id} value={data.id}>
      {data.name}
    </option>
  ));
  return (
    <select
      name="customSearch"
      className="custom-search-select"
      onChange={handleChange}
    >
      <option>Select Item</option>
      {options}
    </select>
  );
}
export default CustomSelect;

위에서,props를 통해select 요소에서options 표시에 필요한 데이터 집합을 수신합니다.옵션 표시를 구축하기 위해서, 우리는props 순환 데이터 집합을 통해 그것을 구축한 다음, 이것을 select 표시의 일부분으로 렌더링합니다.
라벨의 상태(현재 선택한 옵션)는 로컬에 저장되고 로컬 함수handleChange()를 통해 변경될 때 업데이트되어 출력으로 전송됩니다.

버튼 구성 요소

반복 가능한 단추는 응용 프로그램에서 사용하는 모든 곳에서 다른 색 변형이나 크기를 표시할 수 있습니다.components 폴더에 Button.js 파일을 만들고 다음 코드를 추가합니다.

// ./components/Button.js
import React, { useState } from "react";
function Button(props) {
  const [size] = useState(props.size);
  const [variant] = useState(props.variant);
  return (
    <button className={`btn-${variant} btn-${size}`}>{props.children}</button>
  );
}
export default Button;

우리의 버튼은 아이템을 통해 세 개의 속성을 수신합니다.버튼 색상을 결정하는 데 사용되는 변형, 크기 (lg, xs, sm) 로 버튼의 크기를 결정합니다.React의 내장 하위 속성 (props.children) 을 사용하여 단추 내용을 동적으로 표시합니다.

모드 컴포넌트

모드 구성 요소는 응용 프로그램에서 경보를 보내는 데 사용됩니다.components 폴더에 Modal.js 파일을 만들고 다음 코드를 추가합니다.

// ./components/Modal.js
import React, { useState, useEffect } from "react";
function Modal(props) {
  const [message] = useState(props.message);
  const [show, setShow] = useState(props.show);
  useEffect(() => {
    setTimeout(() => {
      setShow(false);
    }, 3000);
  });
  return (
    <div className={show ? "modal display-block" : "modal display-none"}>
      <section className="modal-main">{message}</section>
    </div>
  );
}
export default Modal;

우리의 모드 구성 요소는 두 가지 일을 한다.

팝업 여부를 확인하는 부울 값을 수신합니다

팝업 시 표시할 메시지도 수신

모드를 닫으려면showstate를false로 설정해야 합니다.우리는 몇 초 후에 setTimeout() 갈고리의 useEffect() 함수를 호출할 수 있다.

구성 요소 전환

구성 요소 전환은 정답이나 오류가 필요한 경우에 사용됩니다.그것은 반드시 없어서는 안 될 구성 부분이다.
components 폴더에 ToggleSwitch.js 파일을 만들고 다음 코드를 추가합니다.

// ./components/ToggleSwitch.js
import React, { useState } from "react";
function ToggleSwitch(props) {
  const [checked, setChecked] = useState(props.defaultChecked);
  const [Text] = useState(props.Text);
  function onChange(e) {
    setChecked(e.target.value);
    if (props.onToggleChange) props.onToggleChange(checked);
  }
  return (
    <div className={"toggle toggle-switch"}>
      <input
        type="checkbox"
        name={props.Name}
        className="toggle-switch-checkbox"
        id={props.id}
        defaultChecked={checked}
        onChange={onChange}
      />
      {props.id ? (
        <label className="toggle-switch-label" htmlFor={props.id}>
          <span
            className={
              props.disabled
                ? "toggle-switch-inner toggle-switch-disabled"
                : "toggle-switch-inner"
            }
            data-yes={Text[0]}
            data-no={Text[1]}
          />
          <span
            className={
              props.disabled
                ? "toggle-switch-switch toggle-switch-disabled"
                : "toggle-switch-switch"
            }
          />
        </label>
      ) : null}
    </div>
  );
}
export default ToggleSwitch;

우리의 전환 구성 요소는 다음과 같은 도구를 받습니다.

ID(필수): 확인란에 전달할 입력 컨트롤의 ID입니다.이것이 없으면 구성 요소가 렌더링되지 않습니다

텍스트(필수): 전환 스위치는 True와 False

를 나타내는 두 개의 값을 포함하는 배열입니다.

이름(선택 사항): 확인란에 입력된 레이블 텍스트입니다

.

onChange(옵션): 구성 요소가 반환하는 데이터를 수신하는 데 사용

선택(선택 사항): 현재 상태를 얻기 위해 요소에 직접 전달됩니다

비활성화(옵션): 버튼 상태 설정(옵션)
변경되었을 때, 우리는 상태를 업데이트하고props를 통해 부모 구성 요소에서 보내는 이벤트 탐지기에 값을 보냅니다.

어셈블리 작업

우리가 방금 만든 구성 요소를 사용하려면 부모 구성 요소에서 그것을 렌더링하고 관련 데이터를 전달해야 합니다.다음 내용을 사용자에 추가합니다index.js.

// ./index.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import FormInput from "../components/FormInput.js";
import CustomSelect from "../components/CustomSelect.js";
import ToggleSwitch from "../components/ToggleSwitch.js";
import Button from "../components/Button.js";
import Modal from "../components/Modal.js";
import "./styles.css";
function App() {
  const data = [
    {
      id: "1",
      name: "One"
    },
    {
      id: "2",
      name: "Two"
    },
    {
      id: "3",
      name: "Three"
    },
    {
      id: "4",
      name: "Four"
    }
  ];
  function handleChange(event) {
    console.log(event.target.value);
  }
  function onSelectChange(event) {
    console.log(event.target.value);
  }
  function onToggleChange(event) {
    console.log(event.target.checked);
  }
  return (
    <div className="App">
      <form>
        <Modal show={true} message={"Hello"}>
          <p>THIS IS A MODAL</p>
        </Modal>
        <FormInput type={"text"} onChange={handleChange} />
        <FormInput type={"email"} onChange={handleChange} />
        <div>
          <CustomSelect data={data} onSelectChange={onSelectChange} />
        </div>
        <div>
          <ToggleSwitch
            id="id"
            defaultChecked={false}
            disabled={false}
            Text={["Yes", "No"]}
            onToggleChange={onToggleChange}
          />
        </div>
        <Button variant="danger" size={"sm"} >Small Button</Button>
        <Button variant="primary" size={"lg"} >Smaller Button</Button>
        <Button variant="warning" size={"xs"} >Big Button</Button>
      </form>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

다음을 참조하십시오.

결론

이 강좌에서, 우리는 다시 사용할 수 있는 React 구성 요소를 만드는 방법을 배웠다.이러한 지식은 확장성과 일관성이 높은 React 응용 프로그램을 만드는 데 사용될 수 있습니다.우리는 또한 갈고리를 사용하여 상태 데이터를 관리하고 조작한다.본고에서 사용한 모든 코드 예시는thisCodeSandbox project에서 찾을 수 있습니다.
연결 및 React 구성 요소에 대한 자세한 내용을 보려면 문서here를 참조하십시오.
편집자: 이 문장에 무슨 문제가 있습니까?정확한 버전here을 찾을 수 있습니다.

플러그인: 네트워크 어플리케이션용 DVR용 LogRocket

 

 
LogRocket는 프런트엔드 로그 기록 도구로 자신의 브라우저에서처럼 문제를 재생할 수 있다.LogRocket은 오류가 발생한 원인을 추측하거나 화면 캡처와 로그 저장을 물어보지 않고 세션을 다시 재생할 수 있도록 합니다.프레임워크가 어떻든지 간에 모든 응용 프로그램과 완벽하게 어울릴 수 있으며, 플러그인은 Redux, Vuex, @ngrx/store의 추가 상하문을 기록합니다.
 
LogRocket은 Redux 작업과 상태를 기록하는 것 외에도 콘솔 로그, JavaScript 오류, 스택 추적, 헤더+본문이 있는 네트워크 요청/응답, 브라우저 메타데이터와 사용자 정의 로그를 기록합니다.또한 DOM을 사용하여 페이지에 HTML과 CSS를 기록하여 가장 복잡한 단일 페이지 응용 프로그램이라도 픽셀 수준의 비디오를 재구성합니다.
 
Try it for free .
게시물Building reusable UI components with React Hooks이 먼저 LogRocket Blog에 올라왔다.