defaultProps
props를 주고받을 때 에러 방지를 위한 또 하나의 방법
데이터를 전달해야 하는 컴포넌트의 깊이가 깊다면, defaultProps를 사용하세요.
컴포넌트의 깊이가 깊어져서 props를 child component로 내리는 행위를 여러 번 하게 되면, 개발자의 실수로 props를 넣지 못하는 일이 발생하기도 합니다. 그럴 때에 우리는 보통 렌더링 하는 함수에 예외 처리를 하곤 합니다. 그 예제를 보여 드리겠습니다.
이 컴포넌트를 App.js에서 props를 담지 않고 호출을 해 보겠습니다.
이 때, http://localhost:3000을 보면 어떤 일이 발생했을까요?
map을 찾을 수 없는 이유는 간단합니다. child컴포넌트에서는 props로 넘어올 testArray라는 친구를 기대하고 있는데, 실제로 App.js에서 렌더링하는 child컴포넌트에는 어떠한 props도 넘겨주지 않거든요. 자바스크립트로 리액트 개발을 진행할 때 많이 하는 실수 중 하나입니다.
해결법 중 하나, 그냥 데이터를 제대로 넣어주는 것.
그렇습니다. 이보다 완벽한 해결 방법은 없어요. 그러나 우리는 다른 방법을 사용해 볼 것입니다. 리액트 개발을 시작하게 되었을 때, 리스트 같은 데이터를 출력하기 위해서는 필수적으로 더미데이터가 필요합니다. 서버와 연동하기 전 리스트가 제대로 보이는지 확인을 해볼 필요가 있으니까요. 그런데 컴포넌트 만드는 시점에서 더미데이터를 만들어 놓기란 상당히 귀찮은 일이죠. 그리고 매번 오류를 확인하기 위해서는 브라우저를 봐야만 확인할 수 있습니다. 상당히 비효율 적인 방식이죠.
마음을 편안하게 해주는 defaultProps
리액트에서 따로 모듈을 설치하지 않고도 해결할 수 있는 방법 중 하나입니다. defaultProps, 말 그대로 props가 가지는 기본값을 미리 할당하는 것 입니다. 위의 예제를 props를 넘겨주지 않고 defaultProps로만 해결을 해 보도록 하겠습니다.
이제 다시 브라우저를 확인하게 되면, 에러가 없는 화면을 보실 수 있습니다.
페이지를 빠르게 개발하고 싶을 때 사용하는 방법 중 하나입니다. 이 방법으로 개발하게 되면 일단 개발 자체의 속도는 엄청나게 올라갑니다. 개발하다 에러를 마주칠 일도 적구요. 만약 defaultProps로 기본 데이터를 할당한 상태에서 새로운 props를 할당하게 되면 어떻게 될까요?
리액트 개발자 도구가 프로그래머의 에러를 어느 정도는 방지해준다고는 하지만, 매번 브라우저 화면이 제대로 렌더링 되는 모습을 확인하면서 개발을 진행하게 되면 개발 속도가 줄어들게 되니, defaultProps를 이용해서 기본적인 에러를 방지하는 방법을 배워보았습니다.
Last updated
