1. JSX (JavaScript XML)
React에서는 JSX라는 문법을 사용하여 HTML과 비슷한 구문을 작성할 수 있습니다. JSX는 JavaScript 코드 안에 HTML 구조를 포함할 수 있도록 해줍니다.
import React from 'react';
import ReactDOM from 'react-dom';
const element =Hello, world!
;
ReactDOM.render(element, document.getElementById('root'));
JSX는 HTML처럼 보이지만 실제로는 JavaScript 코드로 변환되므로, 유효한 JavaScript 표현식이 있어야 합니다.
2. 컴포넌트 (Component)
React 애플리케이션은 컴포넌트라는 독립적이고 재사용 가능한 코드 블록들로 구성됩니다. 컴포넌트는 함수형 또는 클래스형으로 정의할 수 있습니다.
함수형 컴포넌트
함수형 컴포넌트는 단순한 JavaScript 함수로, props를 받아 JSX를 반환합니다.
import React from 'react';
function Welcome(props) {
return안녕하세요, {props.name}님!
;
}
export default Welcome;
클래스형 컴포넌트
클래스형 컴포넌트는 React.Component를 상속받는 클래스입니다.
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return안녕하세요, {this.props.name}님!
;
}
}
export default Welcome;
3. props
컴포넌트 간 데이터를 전달할 때는 props를 사용합니다. 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 유용합니다.
function App() {
return (
);
}
function Welcome(props) {
return안녕하세요, {props.name}님!
;
}
4. state
React 컴포넌트에서 동적인 데이터를 관리하기 위해 state를 사용합니다. useState 훅을 사용하여 함수형 컴포넌트에서 상태를 관리할 수 있습니다.
useState 훅
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (현재 카운트: {count}
);
}
export default Counter;
클래스형 컴포넌트에서 state
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (현재 카운트: {this.state.count}
);
}
}
export default Counter;
5. 이벤트 처리
React에서는 DOM 이벤트를 처리할 때 onClick, onChange 등의 이벤트 핸들러를 사용할 수 있습니다. 이벤트 핸들러는 JSX 구문에서 중괄호 안에 작성합니다.
function Toggle() {
const [isOn, setIsOn] = useState(false);
const handleClick = () => {
setIsOn(!isOn);
};
return (
{isOn ? '켜짐' : '꺼짐'}
);
}
export default Toggle;
6. 컴포넌트 생명주기 (Lifecycle)
클래스형 컴포넌트에서는 컴포넌트의 생명주기 메서드를 사용할 수 있습니다. 예를 들어, componentDidMount는 컴포넌트가 처음 렌더링된 후에 호출됩니다.
import React, { Component } from 'react';
class LifecycleDemo extends Component {
componentDidMount() {
console.log('컴포넌트가 마운트되었습니다.');
}
componentWillUnmount() {
console.log('컴포넌트가 언마운트됩니다.');
}
render() {
returnReact 컴포넌트 생명주기
;
}
}
export default LifecycleDemo;
7. useEffect 훅
useEffect 훅은 함수형 컴포넌트에서 사이드 이펙트를 처리할 때 사용합니다. 이 훅은 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 통합한 것입니다.
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(timer); // 컴포넌트가 언마운트될 때 정리
}, [count]);
return;
}
export default Timer;
8. 리스트와 key
React에서 리스트를 렌더링할 때는 map() 함수를 사용하여 반복적으로 컴포넌트를 렌더링합니다. 이때 각 리스트 아이템에 고유한 key를 지정해야 합니다.
function ItemList() {
const items = ['사과', '바나나', '체리'];
return (- {items.map((item, index) => (
- {item} ))}
);
}
export default ItemList;
9. 양방향 바인딩 (Two-way Binding)
React에서 양방향 바인딩을 구현하려면 상태값을 input의 value로 설정하고, onChange 이벤트로 상태를 업데이트합니다.
import React, { useState } from 'react';
function NameInput() {
const [name, setName] = useState('');
const handleChange = (event) => {
setName(event.target.value);
};
return (
입력된 이름: {name}
);
}
export default NameInput;
10. React Router
React Router는 React 애플리케이션에서 라우팅을 처리하기 위한 라이브러리입니다. 페이지 간의 이동을 쉽게 처리할 수 있습니다.
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
function Home() {
return홈 페이지
;
}
function About() {
return소개 페이지
;
}
function App() {
return (
);
}
export default App;
11. Context API
Context API는 컴포넌트 트리 전체에 데이터를 전달할 수 있는 방법을 제공합니다. 이를 통해 props를 일일이 전달할 필요 없이, 전역 상태를 관리할 수 있습니다.
import React, { createContext, useContext, useState } from 'react';
const MyContext = createContext();
function Child() {
const value = useContext(MyContext);
returnContext 값: {value}
;
}
function Parent() {
return (
);
}
function App() {
const [value, setValue] = useState('Hello, Context!');
return (
);
}
export default App;