멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 76 (가상 DOM의 작동 방식, 컴포넌트 라이프사이클, 순수 함수와 부수 효과)

 

목차

• 가상 DOM의 작동 방식
• 컴포넌트 라이프사이클
• 순수 함수와 부수 효과
• 오늘 하루를 돌아보며

 

가상 DOM의 작동 방식

가상 DOM은 실제 DOM 조작의 비효율성을 해결하기 위해 리액트가 도입한 핵심 기술이다. 실제 DOM은 변경될 때마다 전체 DOM을 다시 계산하고 그려야 해서 성능이 저하되지만, 가상 DOM은 메모리상에서 UI의 가벼운 복사본을 만들어 효율적으로 업데이트를 처리한다.

 

가상 DOM의 작동 원리는 다음과 같다.

1. 새로운 가상 DOM 생성: 컴포넌트의 상태(state)가 변경되면 컴포넌트가 다시 렌더링되면서 새로운 가상 DOM 트리가 만들어진다.
2. 이전 가상 DOM과 비교(Diffing): 리액트는 새로 만들어진 가상 DOM과 이전 가상 DOM을 비교하여 어떤 부분이 변경되었는지 찾아낸다.
3. 실제 DOM 업데이트(Reconciliation): 변경된 부분만 골라 실제 DOM에 한 번에 적용한다.

 

이와 같은 과정 덕분에 불필요한 DOM 조작을 최소화하고, 여러 상태 변경을 하나로 묶어 처리하는 배치 업데이트를 통해 성능을 크게 향상시킬 수 있다.

 

컴포넌트 라이프사이클

컴포넌트 라이프사이클은 컴포넌트가 화면에 나타났다가(마운트), 업데이트되고, 최종적으로 사라지는(언마운트) 일련의 과정을 의미한다.

 

컴포넌트 라이프라이클의 3가지 주요 단계는 다음과 같다.

1. 마운트(Mount): 컴포넌트가 처음 생성되어 화면에 표시되는 단계
2. 업데이트(Update): 컴포넌트의 상태(state)나 부모로부터 받은 속성(props)이 변경되어 다시 렌더링되는 단계
3. 언마운트(Unmount): 컴포넌트가 화면에서 완전히 사라지는 단계

 

컴포넌트를 다시 렌더링하도록 트리거하는 조건은 다음 두 가지다.

1. 상태 변경: 컴포넌트의 상태가 변경되면 해당 컴포넌트는 다시 렌더링된다.
2. 부모 렌더링: 부모 컴포넌트가 다시 렌더링되면 모든 자식 컴포넌트도 함께 다시 렌더링된다.

 

이런 라이프사이클을 이해하면 예상하지 못한 상태 손실을 방지하고, 더 안정적인 애플리케이션을 만들 수 있다. 특히 컴포넌트가 언마운트되면 그 안의 모든 상태가 사라진다는 점을 기억해야 한다.

 

순수 함수와 부수 효과(Side Effects)

프로그램의 예측 가능성은 버그를 줄이는 데 가장 중요한 요소다. 함수를 예측 가능하게 만들기 위한 방법은 순수 함수를 사용하는 것이다.

• 순수 함수: 동일한 입력에 대해 항상 동일한 출력을 반환하고, 함수 외부의 어떤 상태도 변경하지 않는 함수다.
• 부수 효과(Side Effects): 함수가 반환 값 외에 외부 상태를 변경하거나, 외부 환경과 상호작용하는 모든 행위를 말한다. (예: DOM 조작, 네트워크 요청, 콘솔 출력, 전역 변수 변경 등)

함수가 예측 불가능해지는 주된 원인은 부수 효과와 일관되지 않은 결과값 때문이다. 순수 함수를 사용하면 이러한 문제를 해결하고, 더 안정적이고 관리하기 쉬운 코드를 만들 수 있다.

 

부수 효과에 대해서는 내일 마저 다룰 예정이다.

 

오늘 하루를 돌아보며

주말 동안 과제를 하면서도 느꼈지만, 리엑트는 알면 알수록 까다롭지만, 그렇기 때문에 버그를 줄이고 한 번에 이해하기 쉽도록 만들 수 있는 언어인 것 같다. HTML이나 자바스크립트는 오류를 오류라고 알려주지 않는 불친절한 언어여서 실수하더라도 알기 어렵고, 어디에서 문제가 생겼는지 파악하기도 어렵다. 하지만 리액트를 사용하면 그런 불편함이 감소한다.

 

좋은 코드를 짜기 위해 더 많이 배우고 더 많이 시도해 보고 더 많이 노력해야 한다는 생각이 드는 하루였다. 한 번에 좋은 코드를 짤 수 없다. 노력이 쌓이고, 경험이 쌓여서 만들 수 있는 것이다. 조급하게 생각하지 말고 오늘 할 수 있는 최선을 다하고, 이렇게 하루하루 경험을 쌓다보면 언젠가 좋은 코드를 만들고 있는 자신을 발견할 수 있을 것이다! 오늘도 힘내자!!!