1. 프로젝트 배포 설정
프로젝트를 배포하려면 다음 명령어를 사용합니다: npm run build. 서버에 배포하려면 Java 또는 Node.js로 서버를 구성해야 합니다. Express와 같은 라이브러리를 통해 간단히 구현할 수 있습니다.
배포 후 생성된 build 폴더에서 필요한 파일을 가져옵니다. 일반적으로 회사에서는 프론트엔드 팀이 백엔드 팀에게 build 폴더를 전달하여 서버에 배포합니다.
2. React 확장 기능
새로운 React 프로젝트를 생성하려면 다음 명령어를 사용합니다: create-react-app react-extension.
기본 프로젝트 구조
- index.js
import React from "react";
import ReactDOM from "react-dom";
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<div>
<h2>나는 앱입니다</h2>
</div>
);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
확장 1: setState 활용
setState는 비동기적으로 동작하며, 성능 최적화를 위해 상태 업데이트를 캐싱하고 일괄 처리합니다. 즉시 업데이트된 값을 확인하려면 콜백 함수를 사용해야 합니다.
import React, { Component } from 'react';
export default class Counter extends Component {
state = { count: 0 };
increment = () => {
const currentCount = this.state.count;
this.setState({ count: currentCount + 1 }, () => {
console.log('업데이트된 값:', this.state.count);
});
};
render() {
return (
<div>
<h1>현재 합계: {this.state.count}</h1>
<button onClick={this.increment}>+1</button>
</div>
);
}
}
setState는 객체 형식과 함수 형식 두 가지 방법으로 상태를 업데이트할 수 있습니다:
- 객체 형식: 간단한 상태 변경 시 사용.
- 함수 형식: 이전 상태나 props에 따라 상태를 업데이트할 때 사용.
this.setState(
(prevState) => ({ count: prevState.count + 1 }),
() => console.log('최종값:', this.state.count)
);
확장 2: 라우터 지연 로딩(lazyLoad)
페이지 초기 로딩 속도를 개선하기 위해 라우팅된 컴포넌트를 클릭 시점에만 로드하는 방식을 사용합니다. 이를 통해 불필요한 자원 로드를 줄일 수 있습니다.
확장 3: Hooks 활용
Hooks는 함수형 컴포넌트에서 상태 관리와 사이클 메서드를 제공합니다. 예를 들어:
useState: 상태 관리.useEffect: 마운트/업데이트 시 실행되는 작업 정의.
import React, { useState, useEffect } from 'react';
function ExampleComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('컴포넌트가 마운트되었습니다.');
return () => console.log('컴포넌트가 언마운트됩니다.');
}, []);
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
}
확장 4: Fragment 사용
<Fragment>는 여러 자식 요소를 감싸되 DOM 노드를 추가하지 않습니다. 특히 리스트를 렌더링할 때 key를 적용해야 하는 경우 유용합니다.
import React, { Fragment } from 'react';
function ListItems() {
return (
<Fragment>
<li>항목 1</li>
<li>항목 2</li>
</Fragment>
);
}
확장 5: Context API
Context는 컴포넌트 간 데이터 공유를 위한 방법으로, 조상-자손 컴포넌트 간 직접적인 Props 전달 없이 데이터를 전달합니다.
import React, { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
function ChildComponent() {
const theme = useContext(ThemeContext);
return <div>현재 테마: {theme}</div>;
}
function ParentComponent() {
return (
<ThemeContext.Provider value="dark">
<ChildComponent />
</ThemeContext.Provider>
);
}