리액트의 소품은 대체 무엇입니까

JavaScript를 사용하여 웹 앱을 만들 수 있지만. JS보다 react를 사용하는 이유 중 하나는 컴포넌트 재사용성입니다.

구성 요소 재사용성이란 무엇입니까? 구성 요소를 한 번 만들고 다른 웹 사이트(또는 프로젝트)에 계속해서 사용합니다. 예를 들어 탐색 모음을 한 번 만들고 블로그 웹사이트, 전자상거래 웹사이트, 소셜 미디어 앱 등에 재사용할 수 있습니다.

소품은 우리가 그렇게 할 수 있도록 도와줍니다 ☝️.

이 블로그에서 우리는 prop이 어떻게 작동하는지 이해할 것입니다.

먼저 Navbar.js에서 Navbar 구성 요소를 만듭니다.

그런 다음 App.js에서 가져오기

(가져오기-내보내기는 매우 간단하지만 작동 방식을 모르는 경우 여기를 클릭하십시오.)

(나는 내 ​​자신의 구성 요소 라이브러리에서 탐색 구성 요소를 만들 것입니다. 여기에서 확인하십시오: https://parts-builder.netlify.app/ ).

//App.js

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar/>
    </div>
  );
}

//Navigation.js

import React from "react";
import './App.css'

export default function App() {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="/">Logo</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">Services</a></span>
        </div>
      </nav>
    </div>
  );
}

이제 책을 판매하는 웹사이트를 만들고(이름을 "Kitab"으로 지정하겠습니다) 위의 navbar 구성 요소를 재사용하고 싶습니다.
그래, 할 수 있어, 뭐가 해

단 2개의 문제:

나만의 로고를 사용하고 싶습니다.

서비스 대신 로그인 옵션을 제공하고 싶습니다.

여기에 우리가 할 수 있는 슈퍼히어로 소품이 있습니다.

먼저 로고를 변경해 보겠습니다.

//App.js

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar logo="Kitab"/>
    </div>
  );
}

//Navigation.js

import React from "react";
import './App.css'

export default function App(props) {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="/">{props.logo}</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">Services</a></span>
        </div>
      </nav>
    </div>
  );
}

야야! 우리는 해냈다.

하지만 달라진 점: 3가지

App.js에서 "Navbar logo="Kitab"/"를 참조하십시오

.

Navigation.js에서 매개변수로 제공된 "props"

"로고"라는 단어 대신 Navigation.js에서 {props.logo}를 사용했습니다

.

마찬가지로 "services"링크를 "login"링크로 교체해 보겠습니다.

//App.js

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar logo="Kitab" anyName="login"/>
    </div>
  );
}

//Navigation.js

import React from "react";
import './App.css'

export default function App(props) {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="/">{props.logo}</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">{props.anyName}</a></span>
        </div>
      </nav>
    </div>
  );
}

props를 사용하여 동일한 구성 요소를 계속해서 재사용할 수 있는 방법을 이해하셨기를 바랍니다.

문자열 대신에 개체, 링크, 배열 또는 그 밖의 모든 것을 전달할 수 있었습니다.

이제 prop이 무엇인지 이해했으므로 PropType이 무엇이고 어떻게 작동하는지 알아야 합니다. 이것을 알기 위해 여기에서 나의 다음 블로그를 읽으십시오(내일 출판될 것입니다).

그게 다야.

궁금한 점이 있으면 댓글 섹션에 질문해 주시면 최대한 빨리 답변해 드리겠습니다.

나는 웹 개발과 관련하여 매일 하나의 기사를 씁니다(예, 매일). 같은 것을 배우고 있다면 여기로 나를 따르십시오 ..

기사가 마음에 들면 Twitter에서 나를 팔로우하십시오.

Linkedin 유형이라면 연결해 봅시다.

멋진 하루 보내세요 😀!