5)React - 컴포넌트연결 ( 1차, props이용 / 2차 태그로만연결하기 )

1차완성

App.js

// import logo from "./logo.svg";
import "./App.css";
// import Test from "./Test";
// import Nametest from "./Nametest";
import Person1 from "./Person1";
import Person2 from "./Person2";

function App() {
  let name = "김이박";
  // let sayhi = "잘가"
  // return <Nametest name="김" age={20} />;
  return (
    <>
      <Person2 />;
      <Person1 />;
    </>
  );
}

export default App;

컴포넌트 - Person1.js   ,    Person2.js 

import React from "react";

// const Person1 = ({ name, age }) => {
//   return (
//     <div>
//       안녕하세요.{props.name}, 저는{props.age}살 입니다.
//     </div>
//   );
// };

// Person1.defaultProps = {
//   name: "김",
//   age: 20,
// };

function Person1(props) {

//함수안에서 변수를 정의해서 
//리턴으로 가져올 수 있다
//위가 정의해서 리턴으로 가져오는 것을 써오기 


  console.log(props)
  return <div style={{ color: props.color }}>name 김 , 나이:20 {props.name}</div>;


}

export default Person1;

import React from "react";

// const Person1 = ({ name, age }) => {
//   return (
//     <div>
//       안녕하세요.{props.name}, 저는{props.age}살 입니다.
//     </div>
//   );
// };

// Person1.defaultProps = {
//   name: "김",
//   age: 20,
// };

function Person2(props) {
  console.log(props.나이);
  // const { 이름, 나이, 지역 } = props;
  // console.log(이름)
  // console.log(나이)
  // console.log(지역)
  return (
    <div>
      name : {props.이름}, 나이 :{props.나이}
    </div>
  );
}

export default Person2;

---

컴포넌트란?

컴포넌트는 독립적이고 재사용이 가능한 UI를 만들수 있는 단위 이다.

 “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

 

state
- 쉽게 말해, 컴포넌트에서 저장해야 될 자료

props
- 부모 컴포넌트나 다른 컴포넌트로 부터 데이터를 받아서 이를 사용하기 위해 쓰임

---

 

업그레이드 할 부분 : props 가 아닌 완전한 프로퍼티를 가져와서 App.js 에서 불러오는 걸로 수정하여 코딩하기