What we learn.... 🖊
React Core Syntax, JSX
Component와 Data의 활용방법
1️⃣ Node.js
2️⃣ create react app
npx create-react-app '프로젝트명'
3️⃣ 로컬서버 띄우기
cd '프로젝트명'
npm start
## localhost:3000 에서 자동으로 로컬서버 생성
4️⃣ vscode에서 폴더 열기
+)) 로컬서버 종료하기
ctrl + C 시 종료
# 배포된 프로젝트로 실습
1️⃣ 프로젝트 오픈 및 터미널 오픈
npm install
## package.json에 적혀있는 dependency들을 다운로드하는 명령어
2️⃣ 의도치 않은 난관 봉착
## dependency tree의 보안 취약점과 해결 방안을 제공
npm audit
## 최상위 종속성의 major 업데이트를 진행
npm audit fix --force
3️⃣ 서버 재기동
## 개발 서버를 실행하는 명령어
npm start
// index.js : 로컬 서버를 실행시킨 후 처음으로 실행될 코드
/* react-dom이라는 서드파티 라이브러리에서 ReactDOM이라는 객체를 import */
import ReactDOM from 'react-dom';
/* index.html 내부에 작성된 root div 내부에 App.js를 가져와서 렌더링함 (JSX 구문) */
ReactDOM.render(<App />, document.getElementById('root')); // .js 생략 O
1️⃣ 기존 방식 -명령형(Imperative) 접근 방식-
/* 기존 javascript에서 사용하던 방식 */
const para = document.createElement('p');
para.textContext = 'This is also visible';
document.getElementById('root').append(para);
2️⃣ React 방식
/* App.js */
function App() {
return (
<div>
<h2>Let's get started!</h2>
{/* 최종상태만 정의하면, 리액트에서 자동으로 지시사항(기존 자바스크립트 문법과 같은 형태)을 생성 후 작동 */}
<p>This is also visible ~.~</p>
</div>
);
}
export default App;
1️⃣ 사용자 컴포넌트 생성 (ExpenseItem.js)
2️⃣ ExpenseItem 컴포넌트에 css 추가
3️⃣ ExpenseItem 컴포넌트에 동적 요소 추가
4️⃣ App.js내 소스 간략화
Composition (합성)
합성과 wrapper component의 사용 이유
컴포넌트란 코드를 여러 개의 파일과 블럭으로 나누어 만든 재사용이 가능한 아이템
📍 리액트를 작업 시 알아야할 중요 개념인 Component와 props