Todolist_화면 안나옴 + props 인식오류 / Uncaught TypeError: Cannot destructure property > 해결

오류발견

새로운 Header 컴포넌트를 생성하자 갑자기 화면이 나오지 않기 시작했다.
에러 메세지에서는 children 을 구조분해할 수 없다고 나온다.
(Header 에 props 로 children 을 넣어준 상황)

첫번째 시도 > 해결

먼저 에러가 나는 컴포넌트파일을 열어보았다.
틀린그림찾기!

바로 export 에러였다.
자세히 보면 export default Header(); 라고 적혀있는데
컴포넌트를 내보낼 때는 export default Header; 만 해야한다.

왜 그럴까?
Heder() 를 export 하면 Header 컴포넌트가 아닌
Header 함수의 리턴값이 export 되기 때문이다.
둘의 차이점을 몰라서 어떤 것을 쓰든 다 상관 없는 줄 알았다.
그래서 Header 말고도 연결된 App, Input 등 여러 컴포넌트의 export 를 이런식으로 하고 있었다.

export default Header; 로 고쳐주니 다 잘 작동한다.
다음부터는 주의해서 작성해야겠다.