질문드립니다.

인프런 커뮤니티 질문&답변

blossom_mind

작성한 질문수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

6.3) 기능 구현하기

해결된 질문

24.08.06 05:25 작성

102

수정됨

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의 매개 함수의 리턴값으로 함수를 넣는건데 ..두개의 차이가 뭔지좀 궁금합니다.

javascript react node.js

답변 1

이정환 Winterlood

지식공유자

2024. 08. 06. 21:49

안녕하세요 이정환입니다.

두개의 질문을 주셨네요 순서대로 답변해드리자면

우선 Props는 컴포넌트에게 매개변수로 "객체" 형태로 전달됩니다.

따라서 다음과 같이 Parent 컴포넌트에서 Child 컴포넌트에게 Props를 제공했다면

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

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

Child에게는 매개변수로 다음과 같은 객체 형태의 Props가 전달될겁니다.

{
    a: 1,
    b: 2
}

그러므로 Child 컴포넌트에서는 다음과 같이 구조분해 할당을 이용해 객체 형태의 Props로 부터 특정 값을 꺼내어 활용할 수 있습니다.

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

이때 참고로 구조분해할당은 다음과 같이 매개변수의 선언과 동시에 가능합니다. (이는 자바스크립트 섹션의 내용입니다)

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

따라서 React에서는 보통 위와같은 방식으로 간결하게 매개변수로 전달받는 Props의 값들을
즉시 구조분해 할당하여 사용합니다.

두번째 질문의 답을 드리자면

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

1번과 2번 형태의 onClick 이벤트핸들러 설정의 차이를 질문하셨는데요

1번 형태는 버튼의 onClick 이벤트 핸들러로 화살표 함수를 전달합니다.

따라서 1번 버튼이 클릭되면 해당 화살표 함수가 호출이 되어 onClickButton(-1)을 호출하게 됩니다.

그러나 2번 형태는 버튼의 onClick 이벤트 핸들러로 onClickButton(-1)의 호출 결과를 전달합니다.

이것은 함수를 전달하는게 아닙니다. 함수를 전달하시려면 onClick={onClickButton} 처럼 전달하셔야 합니다. onClickButton(-1)은 onClickButton 함수를 호출하고 인수로 -1을 전달한 결과값을 의미합니다.

쉽게 말해 이벤트 핸들러 역할을 할 함수를 전달한게 아니라, 함수의 호출 결과 자체를 전달한거라고 이해하시면 됩니다. 따라서 2번 형태는 정상적으로 동작하지 않습니다.

blossom_mind

작성한 질문수

전체 Q&A

질문하기