노드 JS 설치
터미널(명령)
프로젝트 생성하기
React 프로젝트 구조
•
build : npm run build 커맨드를 통해 생성된 react 배포 폴더
•
node_modules : npm install을 통해 설치된 모듈들이 위치하는 폴더
•
public : static 자원이 위치하는 폴더
•
src : components / containers / pages / store 등이 위치하는 폴더
•
package : version, dependencies, proxy 등의 정보가 들어있는 파일
React 컴포넌트 State, Props
함수형 컴포넌트 (컴포넌트 첫 문자는 대문 = App)
import React from 'react';
function App() {
//스크립트 문법 작성
return (
<div> JSX문법 </div>
);
}
export default App;
JavaScript
복사
JSX
const name = 'jjw';
const element = <h1>Hello, {name}</h1>;
JavaScript
복사
•
자바스크립트를 확장한 문법
•
UI가 어떻게 생겨야 하는지 설명하기 위해 리액트와 함께 사용할 것을 권장
•
JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, 자바스크립트의 모든 기능이 포함되어 있다.
Props : 컴포넌트에 값 전달할 때 사용
useState
•
내용이 사용자 인터렉션에 따라 바뀌어야할 때
import { useState } from 'react';
//선언
const [state, useState] = useState(0);
//사용 => state
//값 수정 => setState(100) // -> 값 수정 시 컴포넌트 재 렌더링 발생
JavaScript
복사
React router dom
리액트는 SPA(Single Page Application) 방식
•
기존 웹 페이지처럼(MPA 방식) 여러 개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다.
•
새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.
•
React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리라고 볼 수 있다.
Router Component
1.
<BrowserRouter> 태그로 컴포넌트 사용하기
•
BrowserRouter를 사용할 것이기 때문에, <BrowserRouter> 태그로 컴포넌트를 감싸준다.
•
Header는 모든 URL에 공통 적용할 Component로 최상단에 위치할 예정이다.
2.
<Routes>, <Route> 컴포넌트 사용하기
•
<Routes> 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
•
<Route>는 path 속성에 경로, element 속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.
3.
<Link> 컴포넌트는 URL 값을 변경한다.
import {Link, Routes, Route, BrowserRouter } from 'react-router-dom';
<BrowserRouter>
<header>
<Link to='/'>HOME</Link>
<Link to='/list'>list</Link>
</header>
<main>
<Routes>
<Route path='/' element={<Main/>}></Route>
<Route path='/list' element={<List/>}></Route>
</Routes>
</main>
<BrowserRouter>
JavaScript
복사
컴포넌트 이동 시 파라미터값 사용 예시
•
Link / State
import { Link } from 'react-router-dom';
<Link to="/ex" {state: 전달하고 싶은 값}> NAME </Link>
JavaScript
복사
컴포넌트 (값 전달)
import { useLocation } from 'react-router-dom';
const {state} = useLocation();
JavaScript
복사
전달 값 (사용)
•
useNavigate(컴포넌트 이동) / useLocation(파라미터 취득)
1.
페이지 이동 시, 파라미터 전달 방법
a.
useNavigate() 훅으로 navigate 함수를 취득한다.
b.
navigate() 함수의 첫 번째 인자에 이동할 경로, 두 번째 인자의 state 속성에 파라미터를 넣어준다.
ex) naviagate(’/media’, {state: {key: value}});
2.
이동한 페이지에서, 파라미터 취득 방법
a.
useLocation() 훅으로 location을 취득한다.
b.
location.state로 전달 받은 파라미터를 취득할 수 있다.
ex) const { state } = useLocation();
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
const move = () => {
navigate('/media', {state: 전달하고 싶은 값});
JavaScript
복사
컴포넌트 (값 전달)
import { useLocation } from 'react-router-dom';
const { state } = useLocation();
JavaScript
복사
전달 값 (사용)
Context API
•
Context는 리액트 컴포넌트간에 어떠한 값을 공유할 수 있게 해주는 기능
•
전역적(global)으로 필요한 값을 다룰 때 사용. (꼭 전역적일 필요는 없다)
•
단순히 리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다.
// Context 생성
import { createContext } from 'react';
const MyContext = createContext(null);
// 컴포넌트 값 생
function App() {
return (
<MyContext.Provider value="Hello World">
<Message />
</MyContext.Provider>
);
}
JavaScript
복사
// Context / Hook 추가
import { MyContext } from './Context';
import { useContext } from 'react';
function Message() {
const value = useContext(MyContext);
return <div>Received: {value}</div>;
}
JavaScript
복사
자식 컴포넌트
