Component , JSX , props

// 조상 , 부모 , 자식 컴포넌트

function App() {

  return (

    <div>

      <h1>부모-자식 관계 테스트</h1>

      <GrandFather />

    </div>

  );

}

export default App;

function GrandFather() {

  return (

    <div>

      <p>할아버지</p>

      <Mother />

    </div>

  );

}

function Mother() {

  return (

    <div>

      <p>엄마</p>

      <Child />

    </div>

  );

}

function Child() {

  return (

    <div>

      <p>자식</p>

    </div>

  );

}

 

rafce 스니펫 ->

import React from 'react'

const App = () => {

  return (

    <div>

     

    </div>

  )

}

export default App

자동완성!!!

 

import React from "react";

const App = () => {

  const number = 1000;

  const arr = [1, 2, 3, 4, 5];

  const pTagStyle = {

    fontSize: "20px",

  };

  return (

    <div>

      <div id="abc" className="abc">

        {/* js요소이므로 중괄호 + 객체가 필요하므로 중괄호 총2개

        HTML은 1번이지만 style은 객체로 들어가야해서 2번 */}

        <p

          style={{

            color: "orange",

            fontSize: "20px",

          }}

        >

          첫 번째 줄

        </p>

      </div>

      <div>

        {/* 따라서 style을 아래와 같이 사용 가능 */}

        <p style={pTagStyle}>{number}</p>

      </div>

    </div>

  );

};

export default App;

 

function App() {

  return <GrandFather />;

}

function GrandFather() {

  const name = "르탄이";

  // 자식 함수에게 key, value를 넘김 (객체)

  return <Mother name={name} />;

}

// 조상 함수에게서 객체를 받아옴

function Mother(props) {

  const name = props.name;

  return <Child name={name} />;

}

function Child(props) {

  const name = props.name;

  return <div>{name}</div>;

}

export default App;