리액트 리액트 | Noma의 Coder 영화 등급 웹 서비스 | 소품을 사용하여 구성 요소에 데이터 전달

by


리액트 리액트 | Noma의 Coder 영화 등급 웹 서비스 | 소품을 사용하여 구성 요소에 데이터 전달

부동산 소품

React 컴포넌트 간에 데이터를 전달하는 방법.

  • 패스 데이터: 상위 구성 요소에서 하위 구성 요소로 데이터를 넘겨
  • 읽기 전용: 하위 구성 요소는 소품을 변경할 수 없습니다.
  • 단방향 데이터 흐름: 데이터는 항상 상위 구성 요소에서 하위 구성 요소로 흐릅니다.
  • 사용자 지정: 필요한 데이터 및 이벤트 처리기를 구성 요소에 전달합니다.

소품이 있는 기능적 구성 요소

  • Welcome 함수의 (Props) 매개변수를 통해 상위 구성 요소에서 전달된 데이터(Name)를 검색합니다.
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Welcome name="Alice" />;

소품이 있는 노블 컴포넌트

  • 클래스 유형 구성 요소에서 소품은 this.props를 통해 가져올 수 있습니다.
  • Welcome 클래스를 인스턴스화할 때 이름 값으로 “Alice”를 전달합니다. 
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

const element = <Welcome name="Alice" />;

소품을 사용하여 구성 요소에 데이터 전달

  • 소품을 사용할 구성 요소를 만듭니다.
    • 앱 구성요소 나의 Nct 구성 요소생성
    • Nct 컴포넌트는 기본적으로 I love Nct 문장을 출력합니다.
// App.js
function Nct() {
  return <h1>I love Nct</h1>
}
  • Nct 컴포넌트를 앱 컴포넌트에 삽입합니다.
// App.js
function App() {
  return (
    <div>
      <h1>슈고링</h1>
      <Nct />
    </div>
  );
}
  • 앱 컴포넌트에서 Nct 컴포넌트를 호출하면 fav라는 이름으로 데이터가 전달되고 주어진 값은 onetwoseven입니다.
// App.js
<Nct fav="onetwoseven" />
  • 소품은 다양한 데이터 유형을 전달합니다. B. 부울 값, 숫자 및 배열.
    • 문자열을 제외한 모든 유형의 데이터 붙이다다음으로 값을 묶어야 합니다.
// App.js
<Nct fav="onetwoseven" member={('Taeil', 'Johnny', 'Taeyong', 'Yuta', 'Doyoung', 'Jaehyun', 'Jungwoo', 'Mark', 'Haechan')} />
  • Nct 구성 요소에서 전달한 데이터를 사용하려면 요인소품 전달
    • 인수는 아무 이름이나 지정할 수 있습니다.
    • 데이터는 소품으로 전달됩니다. 개체 모양로 저장
    • console.log() 함수개발자 도구 콘솔 탭에만 영향을 미치는 기능입니다.
// App.js
function Nct(props) {
  console.log(props);
  return <h1>I love Nct</h1>
}


'추천 관련글,
  • 중괄호는 Nct 컴포넌트에서 받은 데이터를 화면에 표시하는 데 사용됩니다.
    • 객체와 함께 값 사용 점 연산자사용
    • Shugoring은 앱 구성 요소에서 직접 실행됩니다.
    • I love Nct onetwoseven은 Nct 구성 요소에 소품으로 발행됩니다.
// App.js
function Nct(props) {
  return <h1>I love Nct { props.fav }</h1>


  • 여러 구성 요소에서 소품을 사용할 수 있습니다.
    • 파괴적인 작업prop 개체에서 값을 추출합니다.
    • fav prop은 서로 다른 값을 가지고 있기 때문에 같은 컴포넌트를 사용해도 서로 다른 문장이 출력됩니다.
// App.js
import React from 'react';

function Nct({fav}) {
  return <h1>I love Nct {fav}</h1>
}

function App() {
  return (
    <div>
      <h1>슈고링</h1>
      <Nct fav="onetwoseven" />
      <Nct fav="dream" />
      <Nct fav="dojaejung" />
    </div>
  );
}

export default App;