1. React 개요
React는 Facebook에서 개발하고 관리하는 JavaScript 라이브러리입니다. 사용자 인터페이스를 구축하기 위해 사용되며, 여기에는 웹 페이지 또는 앱에서 보이는 뷰 로직이 포함됩니다. 이를 위해 React는 컴포넌트라는 개념을 사용하여, 재사용 가능한 레이아웃 블럭을 생성합니다.
임의의 코드 예시는 다음과 같습니다.
// React가 필요합니다
import React from 'react';
// React 컴포넌트를 정의합니다
function Hello() {
// 뷰를 반환합니다
return Hello, React!
;
}
// 이 컴포넌트를 다른 파일에서 불러올 수 있게 내보냅니다
export default Hello;
컴포넌트 기반
React는 컴포넌트 기반으로 동작하며, 이를 통해 캡슐화된 컴포넌트를 만들어 상태를 매니징하고, 재사용할 수 있게 해줍니다. 심지어 이 컴포넌트들은 복잡한 UI도 쉽게 구성할 수 있게 해줍니다.
import React from 'react';
// Hello 컴포넌트를 정의합니다
function Hello() {
return Hello, React!
;
}
// App 컴포넌트에서 Hello 컴포넌트를 사용하기
function App() {
return (
2. React 설치 및 환경 설정
2.1 Node.js 설치
JavaScript를 실행하는 환경으로, Node.js 가 필요합니다. 설치는 다음 명령어로 가능합니다.
# Node.js 설치 (macOS)
brew install node
# Node.js 설치 (Ubuntu)
sudo apt install nodejs
2.2 npm과 yarn
npm과 yarn은 JavaScript 패키지 매니저입니다. 패키지를 설치하고 버전을 관리하는데 사용됩니다.
# npm 설치
npm install package-name
# yarn 사용 시
yarn add package-name
2.3 Create-React-App
Create-React-App은 React 개발 환경을 자동으로 설정해주는 패키지입니다. 아래의 명령어를 통해 설치하고, 새 프로젝트를 생성할 수 있습니다.
# Create-React-App 설치
npx create-react-app my-app
# 새로운 React 프로젝트 생성
cd my-app
npm start
3. JSX 문법
3.1 JSX 기본
JSX는 JavaScript XML의 약자로, React 컴포넌트에서 HTML 코드를 작성하기 위한 문법입니다.
// JSX의 기본 형태
function Hello() {
return Hello, React!
;
}
3.2 JSX 조건부 렌더링
JSX에서는 JavaScript의 조건문을 사용하여 조건에 따라 다른 요소를 렌더링할 수 있습니다.
function Greeting({isLogin}) {
return (
{isLogin ? Welcome back!
: Please login.
}
);
}
3.3 JSX 리스트 렌더링
JSX에서는 JavaScript의 배열 메소드를 사용하여 리스트를 렌더링할 수 있습니다.
function TodoList({todos}) {
return (
{todos.map((todo, index) => - {todo}
)}
);
}
4. React 컴포넌트
4.1 함수형 컴포넌트
함수형 컴포넌트는 가장 기본적인 React 컴포넌트의 형태로, JavaScript의 함수로 작성됩니다.
// 함수형 컴포넌트
function Hello() {
return Hello, React!
;
}
4.2 클래스형 컴포넌트
클래스형 컴포넌트는 JavaScript의 클래스로 작성되며, 보통 상태(state) 관리나 생명주기(lifecycle) 메소드 사용을 위해 사용됩니다.
// 클래스형 컴포넌트
class Hello extends React.Component {
render() {
return Hello, React!
;
}
}
4.3 컴포넌트 생명주기
클래스형 컴포넌트에는 생명주기(lifecycle) 메소드가 있어, 컴포넌트가 마운트(mount), 업데이트(update), 언마운트(unmount) 되는 과정에서 특정 작업을 처리할 수 있습니다.
class LifecycleExample extends React.Component {
constructor(props) {
super(props);
console.log('constructor');
}
componentDidMount() {
console.log('componentDidMount');
}
componentDidUpdate() {
console.log('componentDidUpdate');
}
componentWillUnmount() {
console.log('componentWillUnmount');
}
render() {
return Hello, React!
;
}
}
5. Props와 State
5.1 Props 이해 및 사용
Props(properties)는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하기 위한 메커니즘입니다.
// 부모 컴포넌트
function App() {
return Hello, {props.name}!
;
}
5.2 State 이해 및 사용
State는 컴포넌트 내부에서 변경 가능한 데이터를 관리하기 위한 개념입니다. State값이 변경됐을 때 리렌더링됩니다.
// 함수형 컴포넌트에서의 State 사용
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
{count}
);
}
// 클래스형 컴포넌트에서의 State 사용
import React from 'react';
class Counter extends React.Component {
state = {
count: 0
};
increment = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
{this.state.count}
);
}
}
6. Event Handling
6.1 이벤트 생성
React에서 이벤트는 Javascript의 원시 이벤트와 매우 유사하게 작동하며 JSX를 통해 전달됩니다. 그러나 React 이벤트는 ‘camelCase’ 구문을 사용하며 false를 반환하여 기본 동작을 방지할 수 없습니다.
// onClick 이벤트
6.2 이벤트 종류
React에서 제공하는 이벤트는 여러 종류가 있습니다. 예를 들어, 클릭 이벤트(onClick), 소문자로 시작하는 이벤트(onSubmit), 입력 이벤트(onChange) 등이 있습니다.
6.3 이벤트 핸들링 실습
이벤트 핸들러를 사용하려면 함수를 정의하고 해당 함수를 이벤트 핸들러로 등록합니다.
// 이벤트 핸들러 함수 정의
function handleClick() {
alert('Button is clicked!');
}
// 이벤트 핸들러 등록
// 또는 익명 함수를 이용할 수도 있습니다.
// 클래스형 컴포넌트에서의 이벤트 핸들링
class MyComponent extends React.Component {
handleClick = () => {
alert('Button is clicked!');
}
render() {
return ;
}
}
7. React Hook
7.1 useState
useState는 가장 기본적인 Hook으로서, 함수형 컴포넌트에서 상태 관리를 할 수 있도록 도와줍니다.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
{count}
);
}
7.2 useEffect
useEffect는 렌더링 이후 특정 작업을 수행하기 위해 사용합니다. 클래스 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태라고 볼 수 있습니다.
import React, { useState, useEffect } from 'react';
function Component() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
You clicked {count} times
);
}
7.3 Custom Hook
사용자 정의 Hook을 이용하면 컴포넌트 로직을 함수로 추출하여 재사용할 수 있습니다.
import React, { useState } from 'react';
function useCounter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return { count, increment };
}
function Counter() {
const { count, increment } = useCounter();
return (
{count}
);
}
8. 컴포넌트 스타일링
React 컴포넌트에 스타일을 적용하는 방법에는 여러 방법이 있습니다. 몇 가지 대표적인 방법을 소개드리겠습니다.
8.1 CSS
전통적인 방법은 CSS 파일을 만들고, 컴포넌트에서 클래스 이름을 전달하여 스타일을 적용하는 것입니다.
import React from 'react';
import './MyComponent.css';
function MyComponent() {
return Hello World
}
.my-style {
color: blue;
font-size: 2em;
}
8.2 Sass
Sass는 CSS를 한 단계 더 확장한 것으로, 변수 및 중첩 등의 기능을 제공하여 CSS를 더욱 편리하게 작성할 수 있게 해줍니다.
import React from 'react';
import './MyComponent.scss';
function MyComponent() {
return Hello World
}
$main-color: blue;
.my-style {
color: $main-color;
font-size: 2em;
&:hover {
color: darken($main-color, 20%);
}
}
8.3 Styled components
Styled-components는 CSS-in-JS 스타일링 방식의 하나로, 컴포넌트 스스로가 어떻게 보일지 결정하는 방식입니다.
import React from 'react';
import styled from 'styled-components';
const MyStyle = styled.div`
color: blue;
font-size: 2em;
`;
function MyComponent() {
return Hello World
}
9. Context API
9.1 Context API 개요
Context API는 React에서 전역 상태 관리를 위해 제공하는 API입니다. 스토어를 설정하고 이를 변경하는 로직을 관리할 수 있습니다. 컴포넌트 간의 prop 전달 없이도 컴포넌트 상태를 공유할 수 있습니다.
9.2 Context API 실습
import React, { createContext, useState, useContext } from 'react';
// Step 1: Create Context
const CountContext = createContext();
function CountProvider({ children }) {
const [count, setCount] = useState(0);
const value = { count, setCount };
// Step 2: Provide Context
return {children} ;
}
function Counter() {
// Step 3: Use Context
const { count, setCount } = useContext(CountContext);
return (
Count: {count}
);
}
function App() {
return (
);
}
export default App;
이 코드에서는 먼저 createContext()를 사용해 Context를 만들고, 그것을 CountProvider 컴포넌트에서 제공합니다. 그 다음 Counter 컴포넌트에서 useContext를 사용하여 context value를 받아옵니다.
10. 라우팅 처리하기
10.1 React Router 도입
React에서 라우팅을 처리하는 가장 일반적인 방법은 React Router라는 라이브러리를 사용하는 것입니다. React Router는 React에서 SPA(Single Page Application)를 쉽게 구현하도록 돕는 라이브러리입니다.
10.2 라우팅 처리 실습
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import NotFoundPage from './pages/NotFoundPage';
function App() {
return (
);
}
export default App;
이 코드에서는 Router와 Route를 사용하여 라우팅을 설정합니다. URL path와 그에 대응되는 컴포넌트를 Route로 설정합니다. Switch를 사용해 일치하는 첫번째 Route를 렌더링합니다.
10.3 코드 분할과 Lazy Loading
크게 규모가 있는 웹 애플리케이션의 경우, 모든 코드를 한 번에 로드하는 것은 효율적이지 않을 수 있습니다. 이를 해결하기 위해 코드 분할과 Lazy Loading이라는 기법을 사용합니다.
React에서는 이를 쉽게 활용할 수 있게 React.lazy와 Suspense라는 API를 제공하고 있습니다.
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const HomePage = lazy(() => import('./pages/HomePage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));
const NotFoundPage = lazy(() => import('./pages/NotFoundPage'));
function App() {
return (
Loading...