[React] React의 기술적인 특징

React의 기술적인 특징 세 가지

1. 컴포넌트를 기반으로 UI를 표현
2. 화면 업데이트 구현이 쉬움
3. 화면 업데이트가 빠르게 처리됨

 

1. 컴포넌트 기반 UI

• 컴포넌트는 React의 핵심 building block입니다
• UI를 독립적이고 재사용 가능한 조각들로 나눌 수 있습니다
• 예시: 버튼, 카드, 네비게이션 바 등을 각각의 컴포넌트로 만들 수 있습니다

// Button 컴포넌트 예시
const Button = ({ onClick, children }) => {
  return (
    <button onClick={onClick} className="btn">
      {children}
    </button>
  );
};

 

2. 쉬운 화면 업데이트 구현

• 상태(state) 관리를 통해 데이터 변경 시 자동으로 화면이 업데이트됩니다
• useState, useReducer 등의 Hook을 사용해 간단하게 구현 가능합니다

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
};

 

3. 빠른 화면 업데이트 처리

• Virtual DOM을 사용해 실제 DOM 조작을 최소화합니다
• 변경된 부분만 효율적으로 업데이트합니다
• Reconciliation(재조정) 알고리즘을 통해 최적의 업데이트 방식을 결정합니다
  • 이전 Virtual DOM과 새로운 Virtual DOM을 비교
  • 실제로 변경이 필요한 부분만 실제 DOM에 적용