질문드립니다.

import React from "react";
const Viewer = ({ count }) => {
  return (
    <div>
      <div>현재카운트 : </div>
      <h1>{count}</h1>
    </div>
  );
};

export default Viewer;

이걸 했을떄 ..

import React from "react";
const Viewer = ( count ) => {
  return (
    <div>
      <div>현재카운트 : </div>
      <h1>{count}</h1>
    </div>
  );
};

export default Viewer;

두개 차이가 멀까요 계속 해깔리는데 이거.. 구조 분해형태인거 까진 알겠는데

부모에서

import logo from "./logo.svg";
import "./App.css";
import Viewer from "./component/Viewer";
import Controller from "./component/Controller";
import { useState } from "react";
function App() {
  const [count, setCount] = useState(0);
  const onClickButton = (value) => {
    setCount(count + value);
  };
  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer count={count} />
      </section>
      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );
}

export default App;

GPT 물어보니
({ count }):

• 이 방식은 구조 분해 할당을 사용한 것입니다.

• 함수의 인자로 객체를 받고, 그 객체의 count라는 속성을 변수로 바로 할당합니다.

• 예를 들어, Viewer 컴포넌트가 { count: 5 }라는 객체를 인자로 받으면, count 변수는 바로 5가 됩니다.

(count):

• 이 방식은 구조 분해 할당을 사용하지 않은 것입니다.

• 함수의 인자로 객체를 받고, 그 객체를 count라는 이름의 변수로 할당합니다.

• 따라서 count는 객체가 되며, count 객체의 속성에 접근하려면 count.count처럼 접근해야 합니다.

이렇게 하면 const [count, setCount] = useState(0); 에서 count는 객체가 아니라 그냥 변수 아닌가요 ???


<button onClick={() => { onClickButton(-1); }} >
<button onClick={ onClickButton(-1);} >
이거 2개의 차이가 멀까요

저는 onClick이 함수니까 함수를 전달해줘야 한다고 생각해서 { } 안에 바로 함수를 넣었거던요 ..후자 .

근데 보니까 ()=>{ } 여기다가 함수를 넣는건

onclick의 매개 함수의 리턴값으로 함수를 넣는건데 ..두개의 차이가 뭔지좀 궁금합니다.

function Parent() {
  return <Child a={1} b={2} />;
}

function Child() {
  return <div></div>;
}

{
    a: 1,
    b: 2
}

function Child(props) {
  const { a, b } = props;
  return <div></div>;
}

function Child({ a, b }) {
  return <div></div>;
}

<button onClick={() => { onClickButton(-1); }} > // 1번 형태
<button onClick={ onClickButton(-1);} > // 2번 형태