1. 리액트 + 타입스크립트 프로젝트 생성
npm create-react-app my-app –template typescript
https://create-react-app.dev/docs/getting-started/ or https://create-react-app.dev/docs/adding-typescript
https://velog.io/@qortmdalsdl/react-scripts-feat.-CRA
2. 리액트 프로젝트 구조
package.json에는 dependency들이 정의되어 있고 start, build, test, eject script 들이 들어있다.
cf. package-lock.json이 하는 역할이 무엇일까?
https://hyunjun19.github.io/2018/03/23/package-lock-why-need/
cf. “%”, “-“는 무슨 의미인가?
https://umanking.github.io/2022/05/05/npm-version-tilde-caret/
public/index.html은 index파일이며 body안에 div id가 root인 html tag를 포함한다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id=”root”></div>
</body>
src/index.tsx에는 다음과 같이 id가 root인 div tag에 App이라는 React컴포넌트를 렌더한다.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById(‘root’)
src/App.tsx에는 App 컴포넌트의 내용이 정의되어 있다.
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
React컴포넌트를 정의하는 방식은 함수 방식, 클래스 방식 두 가지가 있는데 위의 경우에는 함수 방식으로 정의되어 있음
$npm run start로 위 코드가 실행되면 다음과 같은 화면이 표시된다.
크롬인 경우 React Developer Tool 확장 프로그램을 설치하면 React 개발자 도구를 사용할 수 있다. React 개발자 도구는 React 컴포넌트의 Props나 State를 보기 쉽게 해주고 값을 수정해 볼 수 있다.
3. 함수형 / 클래스형 컴포넌트
리액트 컴포넌트를 작성하는 방식은 함수와 클래스와 두 가지 방식이 있다.
과거에는 함수형 방식에서 State와 Lifecycle을 지원하지 않아 함수형 방식은 간단한 React component를 정의하는데 사용되었다.
최근에는 hook을 이용하여 함수형 방식에서도 State와 Lifecycle을 구현할 수 있어 함수형 방식이 선호되고 있다. -> Class문법을 몰라도됨
import React, { useState, Component } from 'react';
// 1. 함수형 컴포넌트
function FunctionalCounter() {
const [count, setCount] = useState(0);
return (
<div style={{ border: '1px solid blue', padding: '10px', margin: '5px' }}>
<p>함수형: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
// 2. 클래스형 컴포넌트
class ClassCounter extends Component<{}, { count: number }> {
state = { count: 0 };
render() {
return (
<div style={{ border: '1px solid green', padding: '10px', margin: '5px' }}>
<p>클래스형: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>+1</button>
</div>
);
}
}
// 3. 메인 배치를 위한 App 컴포넌트
export default function App() {
return (
<div style={{ padding: '20px' }}>
<FunctionalCounter />
<ClassCounter />
</div>
);
}
'Front-end > React' 카테고리의 다른 글
| Zustand란? React 전역 상태 관리 쉽게 이해하기 (0) | 2026.07.02 |
|---|---|
| React Router, Rest 호출(Axios) (0) | 2026.07.02 |
| [React] 리액트 컴포넌트 생명주기(Lifecycle) 총정리: 클래스형부터 useEffect 훅까지 (0) | 2026.07.02 |
| [React] JSX, Props & State (0) | 2026.07.02 |
| [React] React란 React Overview (1) | 2026.07.02 |
