[React] 리액트 복습하기 (Props)

//React 강의 복습
import React from "react";

function App() {
  const name = "상위컴포넌트이름";
  return <User comp_name={name} />; // 새로운 이름을 정하고 App에서 User로 정보를 전달한다
}

//컴포넌트는 대문자

function User(props) {
  return <div>{props.comp_name}</div>; // props.로 정보를 전달받는다! {} 필수!
}

export default App;

//------------------------------------------------------------------------------

import React from "react";
//부모
function App() {
    return <User>안녕하세요</User> //컴포넌트 사이에 낀 값을 children 이라고 한다
}

//자식
function User(props) {
    console.log(props)  // 출력값은 children : '안녕하세요.
    return <div>{props.children}</div>
}


export default App;

 

 

---

 

 

 

▼App.js

import Child from "Child";
import React from "react";

function App() {
  const name = "test"; // "test"라는 값을 변수 name에 할당한다
  return (
    // Child로 정보 전달, 3개의 값이 생김 (age, name, children(이름))
    <Child age={21} name={name}>
      이름
    </Child>
  );
}

export default App;

 

 

▼Child.js

import React from "react";
// function Child(props)로 부모 컴포넌트에서 정보를 가져온다
// 하지만 밑에처럼 쓰는 이유는 props에서 받아온 정보가
// 어떤 값을 가지고 있는지 정확하게 보기 위해! (직관적으로 볼 수 있다**)
function Child({ age, name, children }) {
  console.log(age);
  console.log(name);
  console.log(children);
  //   console.log(age, name, children); // 출력값 : 21 'test' '이름'
  return <div>Child</div>;
}

export default Child;

 

 

 

 

---