React를 공부하면서 헷갈렸던 기본 개념들 중 Elements, Props, Components와 DOM에 대해 얘기해보려 한다.
이해를 돕기 위해 LEGO에 비유해서 설명해보겠다.
우리가 LEGO로 만들 집을 상상하면서 공부해보자.
1. Element
React 앱의 가장 작은 building block
LEGO와 비유하자면, element는 우리가 만들고자 하는 것의 가장 작은 구성 요소이다.
만들고자 하는 것이 집의 빨간 벽이면 빨간 레고 블록일 것이고, 만드려고 하는 것이 완성 된 집이면 벽, 창문, 지붕이 될 것이다.
React에서 화면에 나타나는 내용을 기술하는 JavaScript 객체를 element라고 부른다.
button, div, span 등과 같은 것들이라고 볼 수 있다.
Element의 불변성 (immutable):
한번 생성하면 자식이나 속성을 수정 할 수 없다.
React에서 element를 수정하고 싶다면 새로 생성하는 방법 밖에 없다는 것을 기억하자.
2. Component
Element를 만들 수 있는 틀
레고 박스를 구매했을 때 설명서가 하나 딸려온다.
우리가 차와 집, 정원과 같은 element들을 포함하는 있는 집을 만들고자 했을 때, 설명서에는 각각의 구성 요소들을 만들 수 있는 방법이 적혀있을 것이다.
이런 각각의 설명서가 component라고 볼 수 있다.
React에서는 component를 사용해 element를 생성한다.
객제지향적인 관점에서 본다면 class와 같다고 생각하면 편하다.
React에서 component들은 UI가 어떻게 생기고 동작해야하는지 지시해주는 것이며 정원에 있는 잔디 같이 간단한 것 부터 집과 같이 복잡한 것일 수 있다.
Component-based architecture
React는 컴포넌트 기반이라고 표현하는데 이는 작은 컴포넌트들을 모아 하나의 컴포넌트를 구성하고, 또 이런 컴포넌트를 모아 한 페이지를 구성하기 때문이다.
Component들을 반복적으로 사용하면서 코드 양이 줄고 개발 시간 및 유지 보수 비용을 절약 할 수 있다는 장점이 있다.
Velog를 예시로 살펴보면 빨간색으로 표시 된 카드가 여러번 반복 되는 것을 볼 수 있는데, 이게 하나의 component라고 볼 수 있다.
Velog에 있는 수십, 수백개의 카드를 일일히 코딩하는 것이 아니라, 하나의 카드 component를 활용해 안의 속성들만 수정하여 구현했을 것이다.
3. Props
Component의 속성
Props는 proterties를 줄인 말이다. 말 그대로 '속성들'이라는 뜻이다.
앞서 비유한 LEGO 집을 생각했을 때 내가 빨간 벽이 아니라 파란 벽을 만드려고 한다면 빨간색 블록이 아닌 파란색 블록을 사용 할 것이다.
그렇게 된다면 우리는 모양과 크기가 같은 벽이지만 색만 파란색인 벽을 만 들 것이다.
이처럼, props는 component에 전달 할 수 있는 재료 혹은 속성이라고 생각하면 된다.
위에서 보여준 Velog의 예시를 다시 보게되면 똑같이 생긴 카드안에 이미지, 제목, 내용들이 다르다는 것을 확인 할 수 있다.
이는 하나의 component에서 다른 속성들(props)을 넣어 element를 생성해서 그렇다고 볼 수 있다.
다시 말해 props를 component에 입력해 element가 출력되는 구조라고 생각하면 된다.
All react components must act like pure functions with respect to their props
위는 React의 공식 문서에 있는 문장인데, 쉽게 말해 props는 직접 바꿀 수 없으며 같은 props를 입력하면 항상 같은 element를 출력해야 한다는 뜻이다.
4. DOM (Document Object Model)
DOM(문서 객체 모델)
콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현한 인터페이스
LEGO로 생각했을 때, 사진 처럼 완성 된 모델이 DOM이라고 생각하면된다.
그런데 React에서의 DOM과 일반적인 DOM은 약간의 차이가 있다.
React에서는 Virtual DOM이라는 모델을 먼저 생성한 뒤에 Browser DOM으로 넘어가게 된다.
이는 LEGO로 생각했을 때 집을 완성하기 전에 작은 모델을 먼저 만든 뒤, 구조화 할 가장 빠른 방법을 찾아낸 뒤 완성본을 만드는 개념이다.
이의 장점 중 하나는 DOM에서 무언가가 수정이 필요할 떄 React는 JS 객체 형태로 메모리 안에 저장되어 있는 Virtual DOM에서 가장 효율적인 수정 방법을 찾아내서 Browser DOM에 적용시킨다.
위 사진을 보면, 'Change of State' 즉 state가 변경 되었을 때 Virtual DOM에서 'Diffing'이라는 것을 실행하는데, 이는 원본 가상돔과 변경 될 가상돔을 비교하는 작업이다.
이렇게 알아낸 차이점을 토대로 re-rending을 진행해 브라우저에 있는 DOM에 적용시킨다.
Rendering:
렌더링은 React가 코드를 보고 DOM으로 전환하는 작업을 얘기한다.
이 과정은 Reconciliation(재조정)이라고 한다.
궁금했던 것
Element의 불변성을 고려했을 때, 만약 사용자가 버튼을 누르거나 페이지와 interact 했을 때 변경점이 필요하면 어떻게 되는 것인가?
이 질문에 대한 대답은 쉽다.
4 에서 설명한 Virtual DOM을 생각해보자. 만약 사용자가 페이지와 interact하여 수정 할 부분이 생기면 React는 먼저 Virtual DOM에서 수정 할 부분을 찾아 가장 효율적인 방법을 찾는다. 그 후, DOM에서 수정 할 부분만 다시 렌더링 (re-rendering)하여 화면에 출력한다.
