React의 기본 개념과 첫 컴포넌트 만들기
React의 기본 개념
React는 자바스크립트로 작성된 라이브러리로, 사용자 인터페이스를 구축하는 데 사용됩니다. 컴포넌트 기반 아키텍처를 통해 UI를 작은 재사용 가능한 컴포넌트들로 나누어 관리할 수 있어, 복잡한 애플리케이션도 효율적으로 개발할 수 있습니다.
주요 특징:
선언형 : UI의 상태에 따라 자동으로 업데이트가 이루어져 코드가 깔끔하고 관리하기 쉬워집니다.
컴포넌트 기반 : UI를 작은 컴포넌트로 나누어 재사용성과 유지보수를 쉽게 할 수 있습니다.
Virtual DOM : 가상 DOM을 사용해 변경 사항을 먼저 계산하고, 실제 DOM에 필요한 최소한의 업데이트만 적용하여 성능을 최적화합니다.
컴포넌트 기반 아키텍처
React의 핵심은 컴포넌트입니다. 컴포넌트는 UI의 특정 부분을 관리하는 작은 블록으로, 각 컴포넌트는 자체적으로 상태를 가질 수 있고, 부모 컴포넌트로부터 props를 받아서 UI를 구성합니다.
1
2
3
4
5
6
7
import React from 'react';
function Welcome() {
return <h1>Hello, World!</h1>;
}
export default Welcome;
JSX
JSX는 자바스크립트 파일 안에서 HTML처럼 보이는 구문을 사용할 수 있게 해주는 문법입니다. JSX는 자바스크립트로 변환되어 브라우저가 이해할 수 있습니다.
1
const element = <h1>Hello!</h1>;
JSX는 HTML과 비슷하지만, 몇 가지 중요한 차이점이 있습니다:
class 대신 className을 사용합니다.
자바스크립트 표현식을 사용하려면 중괄호 {}를 사용합니다.
함수형 컴포넌트와 클래스형 컴포넌트
React에서는 두 가지 주요 컴포넌트 타입이 있습니다. 함수형 컴포넌트와 클래스형 컴포넌트입니다.
함수형 컴포넌트
함수형 컴포넌트는 props를 입력으로 받아 JSX를 반환합니다. 상태와 라이프사이클 관련 작업은 React 훅을 통해 처리합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>
카운트 증가
</button>
</div>
);
}
export default Counter;
간결한 문법 : 함수형 컴포넌트는 코드가 깔끔하고 직관적입니다.
훅 사용 :
useState,useEffect등 훅을 통해 상태 관리와 사이드 이펙트를 처리할 수 있습니다.함수형 프로그래밍 : 불변성과 순수 함수를 지향합니다.
클래스형 컴포넌트
클래스형 컴포넌트는 render() 메서드를 사용해 JSX를 반환하며, 상태와 라이프사이클 메서드를 직접 정의할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<p>현재 카운트: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
카운트 증가
</button>
</div>
);
}
}
export default Counter;
상태와 라이프사이클 메서드 : 상태 관리와 라이프사이클 메서드를 명시적으로 정의할 수 있습니다.
복잡한 로직 처리 : 상태와 라이프사이클 관리가 복잡할 때 유용합니다.
전통적인 방식 : React의 초창기에는 주로 사용되었지만, 현재는 함수형 컴포넌트와 훅이 선호됩니다.
State와 Props
React에서 데이터를 관리하는 두 가지 주요 방법은 State와 Props입니다.
State : 컴포넌트 내에서 관리되는 데이터입니다. 상태는 시간이 지나면서 변할 수 있으며 UI에 영향을 미칩니다.
Props : 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터입니다. Props는 읽기 전용이며 변경할 수 없습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>
카운트 증가
</button>
</div>
);
}
export default Counter;
위 코드에서는 useState 훅을 사용해 count 상태를 관리합니다. 버튼을 클릭하면 count 값이 증가하고, UI가 업데이트됩니다.
실습
간단하게 “Hello, World!”를 출력하는 컴포넌트를 만들어보겠습니다.
1
2
3
4
5
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome';
ReactDOM.render(<Welcome />, document.getElementById('root'));
이 코드는 React의 ReactDOM.render를 사용해 Welcome 컴포넌트를 root 요소에 렌더링합니다.