p360 ~ p361에서의 showButton의 값이 true로 변경되는게 이해가 잘안갑니다.

[cocoburger]

Image 컴포넌트에서 showButton를 props로 전달받는데요,
Signup 컴포넌트에서는 그냥 showButton값을 넘기기만 하는데
Image컴포넌트에서는 showButton의 값이 왜 true인지 이해가 잘 안갑니다.

showButton을 Image 컴포넌트가 전달받았으니깐 true인건가요??
그래서 image 컴포넌트에서는 기본값을 false로 했으니깐 전달 못받으면 PhotoButton을 안보여주는 구조인건가요?

디버깅으로 Signup컴포넌트에서 넘기는 showButton을 breakpoint로 잡아서 봤지만, 값을 확인 할 수가 없더라구요.

[Alchemist85K]

안녕하세요 @cocoburger 님,

네, props로 키만 넘기면 받는 쪽에서 true로 처리됩니다.
말씀하신대로 showButton의 기본값(defaultProps)이 false로 되어 있으면,
전달되지 않았을때는 기본값(false)가 됩니다.

props를 주고 받는 상황은 3가지가 있습니다.

1. 부모가 props에 값을 전달하고 자식 컴포넌트가 받을때
   대표적으로 버튼의 title이 있습니다. <Button title="abc" /> 처럼 "abc"라는 값을 전달합니다.

2. 부모다 props를 전달하지 않았는데, 자식 컴포넌트가 받을때
   자식 컴포넌트에서 전달되지 않은 값을 조회하기 때문에 undefined가 됩니다.

3. 부모가 props 키만 전달했을때
   <Button disabled /> 같은 예가 있습니다. Button 컴포넌트에서 disabled를 받으면 true로 처리됩니다.

값 확인은 props를 받는쪽(자식 컴포넌트)에서 console.log로 확인하는게 가장 쉬운 방법입니다.

즐거운 하루 되세요
감사합니다