생성자 함수와 리액트 컴포넌트

박기완·2021년 7월 20일
1
post-custom-banner

"'자바스크립트는 왜 이모양인가' 읽기"를 읽고

독후감을 읽고 나서 작성하는 독후감.. "자바스크립트는 왜 그모양일까?" 책은 꼭 읽어봐야겠다.

자바스크립트는 클로저로 함수 안에 state를 가질 수 있기 때문에 클래스가 필요없다는 이야기를 읽었다. 마침 작업중이던 코드에 클래스를 썼어서 생성자 함수로 바꿔봤다.

결과는 아주 깔끔했다. 생성자 함수의 지역 변수가 클래스의 private 속성처럼 작동하고, 파라미터도 쉽게 참조할 수 있고, 심지어 이전에 발견 못했던 분기에 따른 버그도 발견했다.

바꿔보니 구조가 뭔가 익숙했는데 바로 리액트 함수 컴포넌트랑 같은 모양이었다. props를 파라미터로, state를 지역변수로 생각하면 JSX 덩어리를 생성하는 생성자 함수가 리액트 컴포넌트의 정체였다.
복선(?)도 깔려있었는데 리액트 컴포넌트 네이밍 컨벤션은 PascalCase이고, 생성자 또한 PascalCase이다.

이제야 자바스크립트가 클래스 없이 더 간결할 수 있다는 것을 이해했다. 리액트 팀이 함수 컴포넌트를 만든 것도 클래스 없이 더 간결한 구조가 되기 위해서일 것이다. 앞으로 갈 길이 멀다는 것을 다시 한 번 느꼈다.

post-custom-banner

0개의 댓글