-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
props 질문 있습니다.
23.06.11 14:56 작성 조회수 357
0
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에서도 {} 이렇게 받아야 제대로 동작 하는걸까요?
답변을 작성해보세요.
0
이정환 Winterlood
지식공유자2023.06.12
안녕하세요 이정환입니다.
리액트의 컴포넌트 역할을 하는 함수(위에서는 Counter 라고 볼 수 있겠습니다)는 props를 객체 형태의 매개변수로 전달받습니다.
따라서 올려주신 첫번째 버전의 코드처럼 객체 디스트럭쳐링(구조 분해 할당)을 통해 내부 프로퍼티 값을 꺼내와 사용해야 합니다.
두번째 버전의 코드는 매개변수의 이름을 그냥 count로 정의한 것 인데요, 콘솔에 이를 찍어보시면 { count : 숫자} 이런 형태로 들어가 있을 겁니다. 따라서 컴포넌트에서 Props를 꺼내 올때에는 첫번째 버전처럼 객체임을 인지하고 구조분해 할당과 함께 사용해야 합니다.
0
강태민
질문자2023.06.11
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입니다.
답변 2