[React]

리액트 - 가상 DOM 사용, 컴포넌트 기반 개발

폴더 구조

• node_modules :: 노드 npm 으로 다운 받은 라이브러리
• package.json :: 설정 파일
• public :: html, image 등 외부에 공개되는 내용
• src :: js 등 소스 파일

컴포넌트

• 리액트 컴포넌트 – 함수로도 충분히 만들 수 있다. 클래스로도 가능
• 조건 :: 1 함수로 구성되어 있다 2 반드시 UI 요소를 return 해야 한다.
• 컴포넌트를 태그 형식을 넣을 수 있다.
• HTML 태그에서 쓰이던 class 속성은 className으로 쓰임

index.js

ReactDOM.render(
	<React.StrictMode>
		<App  />				// App.js의 App() 함수로 된 컴포넌트 호출 
	</React.StrictMode>,
	document.getElementById('root') // 컴포넌트를 그려줄 dom 요소 설정 -- index.html의 div root
)

App.js

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.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>
	);
}
export  default  App; // export를 해 줘야만 다른 곳에서 import할 수 있음

JSX

• return () 안에서 html 문장을 자유롭게 사용 가능
• html 문장안에서 js 변수를 사용할 때는 {변수}로 넣을 수 있음

Props :: 속성들 전달객체

• 부모 컴포넌트에서 자식 컴포넌트에 값을 전달할 수 있음 ```Javascript

<ChildComponent name=”민수” age={27} /> // 숫자는 {} 사용해야 함 <ChildComponent name=”그랩” age={28} /> …

function ChildComponent(props){ const {name, age} = props; // destructure …

## State :: 컴포넌트를 업데이트(렌더링)해 줄 수 있는 장치
- 시간을 보여주는 화면, 시간 표시 컴포넌트는 시간이 지나면서 계속 업데이트 되어야 함
- 네트워크 통신을 통해 데이터를 받아오면 화면 컴포넌트에 새로운 값을 보여줘야 함
- 검색창에서 검색어를 입력할 때 추천 검색어를 바꿔서 보여줌
- props 값은 정적 전달임
- state는 동적으로 변화를 시킬 수 있음
- state가 변경될 때 마다 컴포넌트는 없데이트가 됨.
- state 사용을 위해서는 useState를 사용함
⇒ 네트워크 요청 (비동기 처리)을 해서 결과를 받아오면 state 값을 업데이트 해줍니다. 그러면 화면이 새롭게 렌더링되고 state에 담긴 값을 화면에 보여줍니다.

## useEffect -- 라이프 사이클을 관리
* useEffect ( 함수, 모니터링 대상) -- 대상(배열형태)이 변경될 때마다 함수가 실행됨
* 한번만 사용할 때는 모니터링 대상을 빈 배열[]로 호출 

## React-router-dom :: 라우팅 라이브러리
npm install react-router-dom

```Javascript
//index.js
import {BrowserRouter as Router } from 'react-router-dom';

ReactDom.render(
	<React.StrictMode>
		<Router>
			<App />  // BrowserRouter로 App을 감싼다. App에서 라우팅을 실시함
		</Router>
	</React.StrictMode>,
	document.getElementById('root')
);

• BrowserRouter, Route, Switch 컴포넌트를 이용함

import  './App.css';
import MainPageComponent from  './main';
import UploadPage from  './upload';
import ProductPage from  './product';
import  {Switch,  Route}  from  'react-router-dom';

function  App()  {
return (
	<div>
	<Switch>
	<Route  exact={true} path={"/"}>  // Route에서 props을 설정할 수 있음 -- 컴포넌트를 Route로 감싸준다
	<MainPageComponent  />
	</Route>
	<Route  exact={true} path={"/product/:id"}>
	<ProductPage  />
	</Route>
	<Route  exact={true} path={"/upload"}>
	<UploadPage  />
	</Route>
	</Switch>
	</div>
);
}
export  default  App;

각 path에서 index.js를 넣어주면 해당 path로 호출시 자동으로 index.js 명시 없이 실행됨 [path에 index.js는 생략가능함]

• 100 % 는 부모의 크기를 기준으로 하는 상대 크기임 –> 100 vh :: vh, vw는 윈도우의 크기를 기준으로 하는 절대 크기

• Link 컴포넌트 이용함 :: 클릭시 페이지 전환시 Link 사용 하나의 카드와 관련되어 링크를 연결시켜줌. props 전달 기능 ( to – 갈 곳

• a 태그의 색상이 변화 안되도록 – color : inherit; text-decoration: none; // 해당 밑줄이 사라지고 a 태그 색상 변화X

• useParams 사용 – path 에서 받아오는 파라미터를 처리함 ```javascript import { useParams } from ‘react-router-dom’

function ProductPage(){ const {id} = useParams(); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; ```

• app.js에서 공통 부분인 header 와 footer 담고 있는다.

Antd :: 디자인을 손쉽게 도와주는 라이브러리

npm install antd

import ‘antd/dist/antd.css’; // or ‘antd/dist/antd.less’