1. React란?

React는 Facebook에서 개발한 오픈소스 자바스크립트 라이브러리로, UI(User Interface)를 구축하는 데 주로 사용된다. 주된 특징으로는 컴포넌트 기반 아키텍처, 가상 DOM, 선언형 프로그래밍 모델 등을 꼽을 수 있다. React는 웹 애플리케이션에서 복잡한 사용자 인터페이스를 효율적으로 만들고 관리하는 데 강점을 가지고 있다.

2. 컴포넌트 기반 아키텍처

React는 모든 UI 요소를 컴포넌트로 분리해서 개발하는 방식. 각 컴포넌트는 독립적이며 재사용 가능함. 컴포넌트는 HTML과 자바스크립트를 결합한 JSX(JavaScript XML) 문법을 통해 렌더링. 이를 통해 UI 요소를 모듈화하고, 코드를 효율적으로 유지보수할 수 있게 함.

function Welcome(props) {
return <h1>Hello, {[props.name](<http://props.name/>)}</h1>;
}

3. JSX (JavaScript XML)

React에서 UI를 정의하기 위해 사용하는 확장된 자바스크립트 문법이다. JSX는 HTML과 매우 유사하게 생겼지만, 실제로는 자바스크립트 코드로 변환된다. 이를 통해 컴포넌트 내에서 UI를 선언적으로 정의할 수 있다. JSX는 HTML처럼 보이지만, 내부적으로는 React.createElement() 함수를 호출하는 형태로 변환된다. JSX는 가독성을 높이고, 자바스크립트와 UI 코드를 결합하는데 유용하다.

4. Virtual DOM

React의 핵심적인 기능 중 하나는 가상 DOM(Virtual DOM)이다. 가상 DOM은 실제 DOM의 경량화된 복사본이다. React는 상태(state)가 변경될 때마다 새롭게 가상 DOM을 생성하고, 이전 가상 DOM과 비교(diffing algorithm)를 통해 변경된 부분만 실제 DOM에 반영한다. 이를 통해 성능을 최적화할 수 있다.

5. State와 Props

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}

componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

tick() {
this.setState({
date: new Date()
});
}

render() {
return (
<div>
<h1>현재 시간은 {this.state.date.toLocaleTimeString()}입니다.</h1>
</div>
);
}
}

6. Life Cycle Methods (생명주기 메서드)

React 클래스형 컴포넌트는 생명주기 메서드를 통해 컴포넌트가 생성, 업데이트, 제거되는 과정을 제어할 수 있습니다.