리액트 동작 방식 (1)

리액트는 선언적 UI 라이브러리로, 사용자 인터페이스를 효율적으로 구성하고 관리하는데 초점이 맞춰져 있다. 리액트 동작 방식을 이해하라면 핵심 개념인 가상 DOM, 컴포넌트 기반 아키텍처, 단방향 데이터 흐름 등을 알아야 한다.

선언적 UI 라이브러리는 어떤 상태일 때 어떻게 보여야 하는지를 선언하는 방식으로 개발하는 것을 의미한다.

가상 DOM (Virtual DOM)

리액트의 가장 큰 특징 중 하나는 가상 DOM을 사용한다는 것이다. 가상 DOM은 실제 DOM의 가벼운 복사본으로, 리액트는 가상 DOM을 통해 UI 업데이트를 최적화한다.

가상 DOM 동작 과정

1. 초기 렌더링 : 리액트는 컴포넌트를 기반으로 가상 DOM 트리를 생성한다.
2. 상태 변경 : 컴포넌트의 상태(state)나 속성(props)가 변경되면, 리액트는 새로운 가상 DOM 트리를 생성한다.
3. Diffing 알고리즘 : 리액트는 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분만 찾아낸다.
4. 실제 DOM 업데이트 : 변경된 부분만 실제 DOM에 반영한다. 이 과정을 재조정(Reconciliation)이라고 한다.

가상 DOM 장점

• 성능 향상 : 실제 DOM을 직접 조작하는 것은 비용이 많이 드는 작업이다. 가상 DOM을 통해 최소한의 DOM 업데이트만 수행하므로 성능이 개선된다.
• 선언적 UI : 개발자는 UI가 어떻게 업데이트될지 신경 쓰지 않고, 어떤 상태일 때 UI가 어떻게 보여야 하는지만 선언하면 된다.
  
  

컨포넌트 기반 아키텍처

리액트는 컴포넌트 단위로 UI를 구성한다. 컴포넌트는 독립적이고 재사용 가능한 UI 조각이다.

특징

• 재사용성 : 같은 컴포넌트를 여러 곳에서 재사용할 수 있다.
• 캡슐화 : 컴포넌트는 자신의 상태와 로직을 내부에 캡슐화한다.
• 계층 구조 : 컴포넌트는 부모-자식 관계로 구성되며, 트리 구조를 형성한다.

종류

• 함수형 컴포넌트 : 간단하고 가볍게 작성할 수 있다. useState, useEffect 등의 훅을 사용해 상태와 생명주기를 관리한다.
• 클래스형 컴포넌트 : state와 생명주기 메서드를 사용해 복잡한 로직을 처리한다.
  
  

단방향 데이터 흐름

리액트는 데이터가 단방향으로 흐르도록 설계되었다. 이는 데이터의 흐름을 예측 가능하게 하고, 디버깅을 쉽게 만든다.

특징

1. 상위 -> 하위 컴포넌트로 데이터 전달 : 부모 컴포넌트는 props를 자식 컨포넌트로 데이터를 전달한다.

function Parent() {
  const message = "Hello from Parent";
  return <Child message={message} />;
}

function Child({ message }) {
  return <p>{message}</p>;
}

2. 하위 -> 상위 컴포넌트로 이벤트 전달 : 자식 컴포넌트는 부모 컴포넌트로부터 전달받은 콜백 함수를 통해 이벤트를 전달한다.

function Parent() {
  const handleClick = () => {
    alert('Button clicked in Child');
  };
  return <Child onClick={handleClick} />;
}

function Child({ onClick }) {
  return <button onClick={onClick}>Click</button>;
}