props 질문 있습니다.
542
16 câu hỏi đã được viết
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에서도 {} 이렇게 받아야 제대로 동작 하는걸까요?
Câu trả lời 2
0
안녕하세요 이정환입니다.
리액트의 컴포넌트 역할을 하는 함수(위에서는 Counter 라고 볼 수 있겠습니다)는 props를 객체 형태의 매개변수로 전달받습니다.
따라서 올려주신 첫번째 버전의 코드처럼 객체 디스트럭쳐링(구조 분해 할당)을 통해 내부 프로퍼티 값을 꺼내와 사용해야 합니다.
두번째 버전의 코드는 매개변수의 이름을 그냥 count로 정의한 것 인데요, 콘솔에 이를 찍어보시면 { count : 숫자} 이런 형태로 들어가 있을 겁니다. 따라서 컴포넌트에서 Props를 꺼내 올때에는 첫번째 버전처럼 객체임을 인지하고 구조분해 할당과 함께 사용해야 합니다.
0
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입니다.
Editor Component의 최적화 불가능 이슈
0
17
2
useCallback ⊂ useMemo
0
22
2
라이브러리 설치 질문
0
26
2
linter 질문
0
32
2
감정일기장 vercel 배포 후 새로 고침 시 404페이지가 뜨는 이유
0
38
2
Sort 메서드 관련 아티클
0
41
2
4.1) React.js를 소개합니다 강의를 듣고 궁금한 점이 생겼습니다.
0
41
2
html, body에 적용하는 css 스타일 질문입니다.
0
38
2
eslint.config.js 설정 질문입니다.
0
86
2
존재하지 않는 일기 url입력 시 alert이 두 번 떠요
0
64
1
교재(3쇄)와 강의 내용 문의
0
64
2
12.13) 하단 여백 스타일링 관련 질문 드립니다.
0
87
2
에러 질문드립니다
0
102
2
VSCode 설정 문의
0
131
2
PPT 코드 관련 질문
0
66
2
useEffect와 lifecycle문의
0
87
2
프론트엔드 학습 수준 문의
0
106
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
109
2
데이터 로딩중 화면만 계속 나와요!!
0
99
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
128
2
이후의 커리큘럼 문의
0
151
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
104
2
최적화 관련 질문있습니다 (useMemo 등)
0
126
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
124
3