[ React ] Props

💎 props

🥊 전개구문

- 전개구문을 사용하면 배열이나 문자열과 같이 반복가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는

(배열 리터럴의 경우)로 확장하여,0개 이상의 키-값의 쌍으로 객체를 생성할수있다.

** 객체 형태도 가능하다 ** 

📣 App.js

- App.js : react로 만든 화면을 띄어주는 파일

import 변수명(아무거나) from './components/R01_props.js' ==  './components/R01_props.js' < 이경로에 있는걸 사용

 

 import PropsEx from './components/R01_props.js';

 

  function App() {

    // 리액트의 컴포넌트는 딱 하나의 요소만을 반환할수 있다.

    // -> 여러 요소를 반환하고 싶을 때는 부모 요소로 묶어준다!

    return (

      /* fragment(<></>) : 반환되는 요소를 감쌀 때 사용, 해석 x */

      <>

        {/* jsx 주석 */}

        <h1>Hello React!!</h1>

        <div>리액트 배운다~</div>

        <PropsEx name={`홍길동`}/>

        <PropsEx name={"김길동"}/>

        <PropsEx name={`이길동`}/>

 

      </>

    );

  }

  export default App;

📣 R01_props.js

- props : 부모 컴포넌트가 자식 컴포넌트에게 데이터전달시 사용하는 객체 ↑ name={'...'} 3개가 props

- 리액트는 함수 먼저 읽고 그다음 위에서부터 코드를 수행한다

🔔 그렇긴 때문에 함수가 어디있던지 상관없이 선언만되면 선언위치에 상관없이 어느위치에 있던 함수를 쓸수있게된다.

🔔 리액트에서는 == 동등연산자는 안되고 === 동일 연산자를 사용해야한다

- const PropsEx = (props) =>  : 여기에서 props는 변수명이라 아무거나 사용해도 상관없고 들어있는값은 App.js에서 넘겨준값!!

- const ChildComponent =(props), const MenuPrint =(props) : const PropsEx 함세 넘겨준값이 props에 담겨있음!!

<Props Drilling>

   

    import React from "react";

    const ChildComponent = (props) =>{

        return(

            <>

                <ul>

                    <li>이름 : {props.name}</li>

                    <li>나이 : {props.age}</li>

                </ul>

            </>

        );

    }

    /* 한글도가능하지만 영어로하는게 통상적으로 맞는거니까 영어로 작성하자!!! ↓되는지 안되지는 판단해본것 */

    const MenuPrint = (props) =>{

        return(

            <h4>김밥 : {props.김밥}, 떡볶이 : {props.떡볶이} </h4>

        );

    }

    const PropsEx = (props) =>{

        console.log(props);

        console.log(props.name);

        const menu = {'김밥':3000, '떡볶이':4000};

        return(

            <>

                <h1>{props.name}</h1>

                <ChildComponent name={props.name} age={props.name === '홍길동' ? 20 : 25}/>

                <MenuPrint {...menu}/>

                {/* <MenuPrint 김밥={3000},떡볶이={4000}/> */}

            </>

        );

    }

    export default PropsEx;