리액트 1차

1. 리액트는 왜 필요한가?

1.1 DOM(실제 돔)의 업데이트 방식, 구동 방식

DOM(Document Object Model)은 HTML 요소를 객체로 표현한 계층적 구조이다.

브라우저는 DOM을 이용해 웹페이지를 렌더링하며, 변경 사항이 발생할 때마다 전체 DOM을 다시 그린다.

이 과정은 성능 저하를 유발할 수 있다.

특히, 대량의 요소가 있는 웹페이지에서는 변경이 빈번할 경우 렌더링 비용이 높아진다.

브라우저의 CRP 단계

CRP(Critical Rendering Path, 중요 렌더링 경로)는 브라우저가 HTML, CSS, JavaScript를 처리하여 화면에 렌더링하는 과정이다.

CRP는 다음과 같은 단계로 진행된다:

1. HTML 파싱 및 DOM 생성: HTML 문서를 해석하여 DOM을 구성한다.
2. CSS 파싱 및 CSSOM 생성: CSS를 해석하여 CSSOM(CSS Object Model)을 생성한다.
3. 렌더 트리(Render Tree) 구성: DOM과 CSSOM을 결합하여 화면에 표시할 요소들의 트리를 구성한다.
4. 레이아웃(Layout) 단계: 각 요소의 위치와 크기를 계산한다.
5. 페인팅(Painting) 단계: 계산된 요소들을 픽셀로 변환하여 화면에 표시한다.

1.2 리액트의 가상 돔은 무엇이 다른가?

리액트는 Virtual DOM(가상 돔)을 사용하여 성능을 최적화한다.

가상 돔은 메모리 내에서 실제 DOM의 가벼운 복사본을 유지한다.

상태(state)나 속성(props)이 변경되면, 리액트는 변경된 부분만 비교(diffing)하고, 최소한의 연산으로 실제 DOM을 업데이트한다.

이를 통해 불필요한 렌더링을 줄이고 성능을 향상시킨다.

2. 클래스 컴포넌트와 함수 컴포넌트의 구조 비교

2.1 기본 선언형 비교

• 클래스 컴포넌트클래스 기반으로 정의되며, React.Component를 상속받아 render 메서드 안에서 UI를 반환한다.
• class MyComponent extends React.Component { render() { return <div>Hello, World!</div>; } }
• 함수 컴포넌트함수 형태로 정의되며, return문에서 UI를 직접 반환한다.
• function MyComponent() { return <div>Hello, World!</div>; }

2.2 상태 관리 비교

• 클래스 컴포넌트에서 상태 관리클래스 컴포넌트에서는 state 객체를 사용하여 상태를 관리하며, setState 메서드를 통해 상태를 업데이트한다.
• class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={this.increment}>Increase</button> </div> ); } }
• 함수 컴포넌트에서 상태 관리 (React Hooks 사용)함수 컴포넌트에서는 useState 훅을 사용하여 상태를 관리하며, setCount 함수를 이용해 상태를 직접 변경한다.
• import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increase</button> </div> ); }

2.3 차이점 정리

• 클래스 컴포넌트는 this 키워드를 사용하고, setState로 상태를 변경한다.
• 클래스 컴포넌트는 선언된 메서드만 실행되므로, 함수 컴포넌트처럼 함수 내의 모든 코드가 매번 실행되지 않는다.
• 클래스 컴포넌트는this 키워드를 사용해야 하고, 상태 관리 방식이 상대적으로 복잡하여 코드 작성이 번거롭고 실수를 유발할 가능성이 있다.
• 함수 컴포넌트는 useState와 같은 훅을 활용하여 상태를 관리하며, 코드가 간결하다.
• 함수 컴포넌트는 React 16.8 이후 권장되는 방식이며, 성능 최적화와 유지보수 측면에서 유리하다.