Element 찍어내기/비구조화 할당

비구조화 할당을 살펴볼게요

    <script>
        const object = { a: 1 };
        function A({ a }) {
            console.log(a);
        }
        A(object)
    </script>// 1 이 출력됩니다

    <script>
    const object = { a: 1 };
    function A({ a }) {
        console.log({a});
    }
    A(object)
</script>// 타입은 Object 입니다, 출력값은 {a:1}
object가 가진 a : 1 이 됩니다, 그래서 프로퍼티스에 다른 값을 넣어주면 undefiend 가 출력됩니다

<script>
    const object = { a: 1 };
    function A({ a }) {
        console.log({a});
    }
    A(object)
</script>

 ![](https://velog.velcdn.com/images%2Fkychoi123%2Fpost%2Fd3faab96-8513-4523-86ae-94bf026b3d51%2F20211112_135448.png)
 
 
 
 

function App() {
return (

);
}

export default App;

import React from 'react';

function Hello(props) {
return

}

export default Hello;

const rootElement = document.getElementById("root");

  function Number({ number }) {
    console.log(typeof { number });//Object 이다
    console.log(typeof number) Number , String 이다
    return number % 2 === 0 ? <h1>{number}</h1> : <h3>{number}</h3>; 그런데 계산해서 출력을 한다? 특이함
  }
  const element = (
    <>
      <Number number={1} />
      <Number number="2" />
    </>
  );
  ReactDOM.render(element, rootElement);