props 질문 있습니다.

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

5.4) Props로 데이터 전달하기

작성

434

const OddEvenResult = ({ count }) => {
  return <div>{count % 2 === 0 ? "짝수" : "홀수"}</div>;
};

export default OddEvenResult;

const OddEvenResult = (count ) => {
  return <div>{count % 2 === 0 ? "짝수" : "홀수"}</div>;
};

export default OddEvenResult;

count를 props로 넘겼을 때 첫번째는 제대로 동작하지만 2번째는 짝수,홀수 구분을 하지 못합니다.

하지만 2번째도 count가인건 인지하고 있습니다
(홀수로 출력되기 때문)

counter.js에서 initalvaue가 객체이기 떄문에

oddevenresult에서도 {} 이렇게 받아야 제대로 동작 하는걸까요?

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

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

리액트의 컴포넌트 역할을 하는 함수(위에서는 Counter 라고 볼 수 있겠습니다)는 props를 객체 형태의 매개변수로 전달받습니다.

따라서 올려주신 첫번째 버전의 코드처럼 객체 디스트럭쳐링(구조 분해 할당)을 통해 내부 프로퍼티 값을 꺼내와 사용해야 합니다.

두번째 버전의 코드는 매개변수의 이름을 그냥 count로 정의한 것 인데요, 콘솔에 이를 찍어보시면 { count : 숫자} 이런 형태로 들어가 있을 겁니다. 따라서 컴포넌트에서 Props를 꺼내 올때에는 첫번째 버전처럼 객체임을 인지하고 구조분해 할당과 함께 사용해야 합니다.

강태민

질문자


import React, { useState } from "react";
import OddEvenResult from "./OddEvenResult";

const Counter = ({ initalValue }) => {
  const [count, setCount] = useState(initalValue);

  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };
  console.log(typeof initalValue);
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
      <OddEvenResult count={count} />
    </div>
  );
};

Counter.defalutProps = {
  initalValue: 0,
};
export default Counter;

Counter.js입니다.

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

props 질문 있습니다.