React2

img가져오기
css에 background-img이용

background-img : url();

html에서 style 이용
html에서 import 이용

import 작명 from 'url';

export,import
다른파일에서 변수나 함수를 가져올때 내보낼 파일에 export를 써준다

export default a; //여러개 가져올때 {a , b}

가져올 파일에 import를 이용한다.

import 작명 from './가져올파일url'; //{}를 가져올땐 변수명그대로 가져온다

페이지 나누기
1.컴포넌트 만들어서 상세페이지 내용 채움
2./detail접속하면 컴포넌트를 보여줌

react-router-dom
router

<Route path="/경로" element={<div>내용</div>} />

Link

<Link to="/">home<Link>

useNavigate: 페이지 이동을 도와주는 함수

let navigate = useNavigate();
useNavigate('/경로') //-1을 넣으면 뒤로가기

nested routes: 라우트안에 라우트를씀
Outlet을 이용해서 안쪽 라우트를 보여줌

url파라미터

<Route path="/경로/:id" element={<div>내용</div>} />
//id 파라미터값은 useParams를 이용해서 가져온다.

styled-components:1.js파일에서 css를 쓸 수있다

import styled from "styled-components";

let YellowBtn = styled.button`
    background : ${ props => props.bg }; //bg값을 줄수있다.
    color : black;
    padding : 10px`

<YellowBtn bg="yellow">노란버튼</YellowBtn>

2.스타일이 다른 js파일로 오염되지않는다.
css파일은 module을 붙여서 오염방지 가능 App.module.css
3. 로딩시간 단축

단점:js파일이 복잡해짐
css와 다른게 없음
협업시 css담당의 숙련도 이슈

Lifecycle:컴포넌트가 mount,update,unmount 되는것 중간중간 코드실행가능

useEffect : mount, update 될때 실행됨

useEffect(()=>{    })

쓰는이유 : html렌더링 후 실행이됨 , 시간이 오래걸리는 어려운 연산
서버에서 데이터를 가져오는 작업, 타이머 장착