React 이해하기

DOM을 직접 조작하는 방식은 화면 요소와 이벤트가 많아질수록 복잡해지므로, React는 UI를 컴포넌트로 나누고 상태에 따라 무엇을 보여줄지 선언하는 방식을 제공한다. JSX로 작성한 UI는 React element가 되고, ReactDOM이 이를 실제 DOM에 반영하며, props로 컴포넌트에 데이터를 전달한다. 상태가 바뀌면 React는 렌더링과 재조정(reconciliation)을 통해 필요한 DOM 변경을 적용하고, PureComponent나 memo 같은 얕은 비교 최적화에는 불변 데이터 갱신이 중요하다. Hook은 함수 컴포넌트에서 상태와 재사용 로직을 다루게 해주지만, useState의 상태 병합 방식과 useEffect의 실행·정리 규칙을 이해해야 한다.

• 컴포넌트는 UI와 관련 로직을 하나의 단위로 묶어 복잡한 화면을 나누는 방법이다.
• JSX는 Babel을 거쳐 JavaScript로 변환되며, JSX 없이 React.createElement를 직접 사용할 수도 있다.
• PureComponent와 React.memo의 얕은 비교를 활용할 때는 배열이나 객체를 직접 변경하지 말고 새 참조를 만들어야 한다.
• useState는 클래스의 setState와 달리 기존 객체 상태를 자동으로 병합하지 않으므로 필요한 필드를 직접 보존해야 한다.
• useEffect의 정리 함수로 이벤트 리스너를 제거해 컴포넌트가 사용한 자원을 정리할 수 있다.