프론트엔드/React

[React] React의 기술적인 특징

dev_ares 2024. 11. 21. 05:11
728x90
반응형

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에 적용
728x90
반응형