본 시리즈 게시글은 노마드코더의 리액트강의를 기반으로 내가 공부하면서 정리한 글이다.
리액트란
- 페이스북에서 개발한 javascript library로 대규모 웹애플리케이션에서 데이터가 빈번하게 변경되는 상황에서 뛰어난 성능을 발휘
- 콤포넌트기반 아키텍쳐를 제공
- 높은 재사용성과 유지보수성
- 많이들 사용하기에 알아야 하고 아주 잘 활용할 수 있어야 한다.
리액트 프로젝트 시작
- Node.js와 NPM 설치, VS Code 사용 추천
- Hello World
npx create-react-app my-prj-name // my-prj-name으로 프로젝트 생성
cd my-prj-name
npm start - 소스구조
node_modules 프로젝트에서 사용되는 외부 라이브러리들이 저장됨. package.json에 명시된 라이브러리들이 여기에 설치됨
pulbic HTML, 이미지, 아이콘등 정적 파일들이 포함도며 index.html도 여기 있다.
src 애플리케이션 소스 위치.
index.js 리액트앱의 진입점
App.js 애플리케이션의 메인 콤포넌트
App.css App콤포넌트의 css파일
App.test.js App콤포넌트의 테스트코드
serviceWorker.js PWA 기능을 구현하는데 사용되는 서비스워커 파일. 이를 수정하여 오프라인 UX, background sync등의 기능의 구현이 가능
package.json 프로젝트의 메타데이터와 의존성 정의
소스 분석
index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <!-- 여기에 실제 리액트로 만든화면이 펼처진다. -->실제 화면이 표시될 영역은 index.html의 id가 'root'인 div이다.
index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);root를 가져와서 App component를 render하고 있다.
App.js
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}App.js는 리액트의 콤포넌트 예제로 UI를 구성한다.
삼스입니다.