React는 Facebook에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다.
이 글에서는 React의 주요 개념과 문법에 대해 알아보겠습니다.
1. 컴포넌트 ( Components )
React 애플리케이션은 컴포넌트의 모음입니다. 컴포넌트는 UI의 독립적인 조작을 캡슐화하여, 재사용가능합니다. React의 컴포넌트는 함수형과 클래스형 두 가지로 나뉩니다.
함수형 컴포넌트 ( Functionnal Components )
함수형 컴포넌트는 단순한 JavaScript 함수로, 'props'를 받아서 React요소로 반환합니다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
클래스형 컴포넌트 ( Class Components)
클래스형 컴포넌트는 'React.Components' 를 상속받는 ES6 클래스입니다.
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}2. JSX
JSX는 JavaScript 를 확장한 문법으로, HTML과 유사한 코드를 JavaScript 내에서 작성할 수 있게 합니다. JSX는 'React.createElement()' 함수를 호출하여 React요소를 생성합니다.
const element = <h1>Hello, world!</h1>;3. Props
Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. Props 는 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없습니다.
function App() {
return <Welcome name="Sara" />;
}
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}4. State
State는 컴포넌트 내에서 동적인 데이터를 다룰 때 사용됩니다. 클래스형 컴포넌트에서는 'this.state' 를 사용하며, 함수형 컴포넌트에서는 'useState' 훅을 사용합니다.
클래스형 컴포넌트에서의 State
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>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
함수형 컴포넌트에서의 State
import React, { useState, useEffect } from 'react';
function Clock() {
const [date, setDate] = useState(new Date());
useEffect(() => {
const timerID = setInterval(() => tick(), 1000);
return () => clearInterval(timerID);
}, []);
const tick = () => {
setDate(new Date());
};
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {date.toLocaleTimeString()}.</h2>
</div>
);
}5. 이벤트 처리 ( Event Handling )
React에서는 이벤트를 처리할 때 카멜표기법(camelCase)을 사용하며, 함수 참조를 이벤트 핸들러로 전달합니다.
function ActionButton() {
function handleClick() {
alert('Button clicked!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}6. 조건부 랜더링 (Conditional Rendering)
React에서는 조건에 따라 다른 요소를 렌더링할 수 있습니다.
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
}
return <h1>Please sign up.</h1>;
}7. 리스트와 키 (List and Key)
리스트를 렌더링할 때 각 항목의 고유한 키를 제공해야 합니다.
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}8. 폼 (Forms)
React에서는 폼 요소는 보통 제어 컴포넌트로 다룹니다. 제어 컴포넌트는 폼의 상태를 컴포넌트의 state로 관리합니다.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}위 내용으로 React의 기본적인 문법을 정리했습니다.
React를 이용해 더욱 복잡한 애플리케이션을 구축하려면 추가적인 개념들과 라이브러리(예: Redux, React Router 등)도 공부하는 것이 좋습니다. React의 강력한 기능과 유연한 문법을 활용하시면 멋진 UI를 만들 수 있을 것입니다.