개요
근래에 자바스크립트 딥 다이브 라는 책을 정독하고 정리해보는 시간을 가지며 자바스크립트 본질에 대해 다시 한번 점검하는 시간을 가졌었다.
정말 좋은 책인 것은 틀림없고 그 동안 무지하게 확실히 이해하지 못하고 넘어갔던 자바스크립트의 스코프, 클로저 등의 개념을 짚고 갈 수 있는 좋은 시간이었다.
최근에는 작은 애플리케이션을 개발하면서 이론적으로 학습한 내용을 한 번 더 점검하자는 취지하에 프로그래머스에서 운영하는 프론트엔드 개발을 위한 자바스크립트 라는 스터디 참여했었다.
크게 투두 리스트, 짤 검색기 2가지의 애플리케이션을 개발해볼 수 있다. 작은 규모의 두 가지 애플리케이션 개발이었지만, 내 생각 이상으로 많은 것을 얻어갈 수 있는 시간이라 생각한다.
이번 회고 글에서는 이 스터디에 참여하면서 알게된 유익한 지식을 남겨보려한다.
본론
this, 생성자 함수나 클래스를 통한 컴포넌트(객체) 단위의 개발, fetch 를 통한 비동기 통신, async ~ await 를 통한 비동기 처리, Event Delegation 등의 개념도 실제로 구현을 하며 고민해보면서 이론으로 이해한 것보다 훨씬 유익하게 관련 지식을 내 것으로 만들 수 있었다.
하지만, 내가 결론 내린 이 스터디를 통해 알 수 있었던 핵심은 이거다.
🎯 Vanilla JS 만으로
컴포넌트 단위개발
그동안 React 에만 익숙했다면 React 에서의 컴포넌트 단위로 분할해서 JSX로 표현하면 렌더링되던 자연스럽던 것이 순수하게 vanilla JS 만을 이용해서 이와 비슷하게 구현하려고 하면 초반에 흠칫할 수 있다 생각한다. ( 나 처럼 )
하지만, 이번 스터디를 통해 알게된 핵심은 다음과 같다.
💡
상태(state)의 변경→ 해당 state 를 사용하고 있는컴포넌트의 리렌더링
예시를 하나 들어보자.
A 라는 컴포넌트 를 내가 생성하겠다면 내부적으로 구조는 다음과 같으며, 또 다른 컴포넌트를 생성한다해도 형태는 비슷하다.
function A({ 부모 Element, A컴포넌트에서 사용할 초기 state }) {
// 컴포넌트 Element 생성
this.$A = DOM 생성
// 컴포넌트를 부모 Element 에 연결
$부모 Element.appendChild(this.$A)
// 컴포넌트에서 사용하는 state
this.state = A컴포넌트에서 사용할 초기 state
// 컴포넌트 state 업데이트 -> 이후 변경된 state 기반으로 컴포넌트 리렌더링
this.setState = (새로운 state) => {
this.state = 새로운 state
this.render()
}
// 렌더링 함수
this.render = () => {
this.$A.innerHTML = ...
}
// 초기 렌더링을 위한 호출 (필요에 따라)
this.render()
// 이벤트 등록 (필요에 따라)
...
}내부적으로 필요한 작업이 추가 될 수 있겠지만, 하나의 컴포넌트를 구성요소는 위와 비슷하며 작동원리 또한 비슷하다는 것이다.
setState 함수를 통한 state 의 변경 → 이후 변경된 state 를 통해 render 함수를 호출하여 변경된 내용으로 리렌더링
이와 같은, 단방향적인 컴포넌트 단위의 개발을 알게 되면서 내가 느낀 장점은 다음과 같다.
- 일관성 있는 컴포넌트 단위의 개발로 디버깅이 쉽다.
- state 관련 로직를 담당하는 컴포넌트와, 변경되는 state 를 통해 렌더링하는 것에만 초점을 둔 컴포넌트의 명확한 분리
- 이를 통해 조금의 변화에도 대응가능한 확장성 있는 개발 효과
결론
주의할 점은 핵심이라고 말한 컴포넌트 단위의 개발이 React 에서 개발하는 것과 똑같은 것 아니냐 ? 라고 생각할 수 있다는 것이다.
결과적으로는 일단 엄연히 다른 방식이다. 이와 관련된 내용은 검색해보면 다양한 자료가 있으니 찾아보면 될 것이다.
다만, 인지해야할 부분은 이렇게 vanilla JS 로 컴포넌트 단위의 개발이 어떤식으로 작동되는 가를 완벽하게 이해한다면, React 나 Vue 같은 SPA 를 개발하기 위한 그 어떤 라이브러리나 프레임워크가 등장해도 핵심적인 작동원리는 비슷하다는 것을 알고 빠르게 적응할 수 있다는 것이다.
마지막으로, 미쳐 다 언급하지 못한 자바스크립트의 핵심 개념들을 직접 애플리케이션을 개발하며 능력있는 현업 프론트엔드 개발자 멘토분들의 코드리뷰를 통해 발전시킬 생각이 있다면 해당 스터디를 해보는 것을 추천한다.
이번 스터디를 통해 구현한 결과물을 확인할 수 있는 링크를 공유하며 글을 마친다.
