초기 구상단계에서 리액트 프로젝트를 자바스크립트로 만들었다가 타입스크립트로 바꾸게 되었다.
그런데.. 타입스크립트로 바꾸는 순간 알 수 없는 에러가 뜨는 것이었다..😒
에러의 내용은 이렇다. Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.
결론부터 얘기하면 매개변수로 props를 받고 props를 어디다가 둬야할지 정의해야했기 때문이다.
그렇다면 props는 왜 필요한 것인가??
에러를 맞닥드릴때면 늘 왜? 라는 생각을 한다. 왜냐하면 근본적인 문제점을 파악해야 다음에 비슷한 에러를 맞닥뜨렸을때 수월하게 해결할 수 있기 때문이다.
설명을 쉽게 하기 위해 코드를 살짝 수정하였다.
위 Home 컴포넌트는 Layout 컴포넌트를 사용하고 있다.
글을 읽는 독자들은 대충 짐작했겠지만 Layout 컴포넌트는 header,footer 처럼 모든 페이지에서 공통적으로 사용되는 부분들을 분리시켜 놓은 컴포넌트이다. 예를 들어 Layout은 메인 홈에서도 사용하고 내 정보 페이지에서도 사용해야 한다.
다시 Layout 코드를 보면 props.children은 Layout 컴포넌트 안에서 사용되어지는 코드들을 의미하는 것이다.
유심히 보면 props는 현재 main 태그 안에 존재한다.
Home 컴포넌트의 내용은 main쪽에 위치하게 된다.
props를 Header 위쪽으로 올린다면 어떻게 될까??
예상 했던 것처럼 Home 컴포넌트는 Header 위쪽으로 올라가게 된다.
에러가 뜬 이유는 Layout을 사용하는 컴포넌트를 Layout에 어느 곳에 위치해야할 지 몰랐기 때문에 그런 것이다.
자바스크립트는 에러를 띄워주지 않아서 몰랐는데 타입스크립트는 친절하게 에러를 띄워준다^^
처음에 타입스크립트로 바꾸고 갑자기 안뜨던 에러가 떠서 1시간동안 삽질하면서 욕했는데..
사실 타입스크립트가 없었으면 내가 뭘 잘못했는지도 몰랐을거다