• 강의일자 : 2024.06.11
• URL
  • https://www.youtube.com/watch?v=4qr6cQYUORw

---

강의 내용 요약

• 컴포넌트 만들어서 export 하고, 해당 컴포넌트를 App.js 에 import 하기
• App.js 에서 key-value 구조를 가진 변수를 통해 자식 컴포넌트에 전달하기
• 자식 컴포넌트에서는 App.js에서 전달받은 값들을 매칭시키기

---

에러1 - [Reactjs] cannot read properties of undefined on props

에러 화면

에러 코드

→ src/App.js

import React, { Component } from "react";
import "./App.css";
import Customer from "./components/Customer";

const customer = {
  name: "홍길동",
  birthday: "980101",
  gender: "male",
  job: "programmer",
};

function App() {
  return (
    <Customer
      name={customer.name}
      birthday={customer.birthday}
      gender={customer.gender}
      job={customer.job}
    />
  );
}

export default App;

→ src/components/Customer.js

import React from "react";

function Customer() {
  return (
    <div>
      <h2>{this.props.name}</h2>
      <p>{this.props.birthday}</p>
      <p>{this.props.gender}</p>
      <p>{this.props.job}</p>
    </div>
  );
}

export default Customer;

에러 원인

• Customer.js 에서 ‘this.’를 사용했기 때문

에러 해결

→ src/components/Customer.js

import React from "react";

function Customer() {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.birthday}</p>
      <p>{props.gender}</p>
      <p>{props.job}</p>
    </div>
  );
}

export default Customer;

• 문제는 또 다른 에러 발생

에러2 - 'props' is not defined no-undef

• 에러1을 해결하니 위와 같은 에러 발생

에러 화면

에러 코드

→ scr/components/Customer.js

import React from "react";

function Customer() {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.birthday}</p>
      <p>{props.gender}</p>
      <p>{props.job}</p>
    </div>
  );
}

export default Customer;

• function Customer() 의 부분에 매개변수가 필요한데, 없어서 에러가 발생한 것임

에러 해결

→ scr/components/Customer.js

import React from "react";

function Customer(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.birthday}</p>
      <p>{props.gender}</p>
      <p>{props.job}</p>
    </div>
  );
}

export default Customer;

느낀점

• 부모 컨포넌트(App.js)에서 자식 컨포넌트(Customer.js)로 데이터를 보낼 때에는
  • 자식 컴포넌트에서는 매개변수 arg를 지정해줘야 한다.

소스 코드

src/components/Customer.js

import React from "react";

function Customer(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.birthday}</p>
      <p>{props.gender}</p>
      <p>{props.job}</p>
    </div>
  );
}

export default Customer;

src/App.js

import React, { Component } from "react";
import "./App.css";
import Customer from "./components/Customer";

const customer = {
  name: "홍길동",
  birthday: "980101",
  gender: "male",
  job: "programmer",
};

function App() {
  return (
    <Customer
      name={customer.name}
      birthday={customer.birthday}
      gender={customer.gender}
      job={customer.job}
    />
  );
}

export default App;

결과 화면

느낀점

• 수강하고 있는 강의는 5년전에 촬영됐던 강의라 React / Node / Express 모두 옛날 버전의 Tool들이라, 최신 버전 기준으로 개발하고 있는 나와 소스코드가 살짝 상이해서 에러가 간간이 발생한다. 이번 강의에서도 발생한 에러 모두 버전이 틀려서 나온 에러라고 볼 수 있다. 이 부분에 유의하며 강의를 수강해야겠다.