[동현] Web Component 회고록

[D5ng]

Web Component 회고록

황준일님의 Web Component를 읽고, React의 Component의 동작을 추상화해서 미니멀하게 구현한 것이 나에게 많은 도움이 되었다. 현재 아티클에서는 많은 문제가 있지만, 이 사람이 이렇게 구현 했다는 것은 분명 "이론적인 지식이 엄청 탄탄하고 깊다" 라는 생각이 들었다. 처음엔 나도 스스로 생각하면서 구현을 해보려고 했지만 이론적 지식이 많지 않고, 문제를 잘게 쪼개서 해결하는 능력이 없다는 것을 느꼈다.

나는 학습을 하면서 이 사람의 코드를 직접 따라하진 않았다. 처음엔 똑같이 만들고, 그 이후에 나의 생각들을 담아 코드로 녹여냈다. 이 방법이 좋은진 모르겠지만 그래도 내 생각이 담겨있는 코드라서 나쁘다고 생각하지 않는다. (교차 검증으로 GPT를 활용했다)

이 아티클을 읽고, 따라하고, 생각하면서 만들었을 때 배운 점은 다음과 같다.

1. 상태관리가 무엇인지 왜 필요한지 알게됨
2. 추상화 하는 방법과 추상화 했을 때의 이점
3. 이벤트 버블링을 활용한 고도화된 이벤트 위임 기법
4. React의 클래스 컴포넌트와 함수형 컴포넌트의 생명주기 차이점 추론 능력
5. class와 typescript를 함께 사용했을 때의 이점
6. innerHTML은 해당 요소의 컨텐츠를 비우고, 다시 생성하게 됨 (리액트에서는 innerHTML을 사용하지 않는다. createElement, appendChild를 사용한다)

향후 계획

라이브러리는 깊게 알 필요가 없다라고 생각을 해왔었다. 왜냐하면 라이브러리는 언제든 변경될 수 있기 때문이다. 따라서 큰 틀의 핵심만 아는것이 좋다고 생각했다. 하지만 리액트의 생태계가 앞으로 사라질것 같은 느낌이 들지않고 오히려 더 늘어나고있기에 앞으로 리액트 딥 다이브 책을 읽으면서 제대로 공부를 해봐야겠다. 만약 리액트가 망한다해도 딥 다이브 공부를 하고나면 다른 라이브러리나, 프레임워크가 쉽다고 느껴질것 같은 생각도 든다