반보칵습

◾ arrow function에서 return과 {}는 동시에 생략
◾ 코드가 길어지면 export default
--▫ 여러개는 묶어서 export {}, 가져올 때도 {}
◾ object 는 {key:value} 다. 까먹지 말자.
--▫ key값으로 불러서 가져오기 object.key
◾ 사진 자료 가져올 때, 이미지 주소 문자열로 바꾸고 '+ i +' 이런 식으로 처리할 수 있다

function Card(props){
  return (
    <div className="col-md-4">
      <img src={'https://codingapple1.github.io/shop/shoes' + props.i + '.jpg'} width="80%" />
      <h4>{ props.shoes.title }</h4>
      <p>{ props.shoes.price }</p>
    </div>
  )
}

◾ 리액트 라우터는 그냥 검색해서 쓰기.
--▫ Route가 하나의 페이지가 된다.

◾ 페이지 이동 버튼 useNavigate() 써도 된다

function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

// <button onClick={()=>{ navigate(-1) }}/> 뒤로가기 버튼

Route

import {Routes, Route} from 'react-router-dom' 				//import 하고

(..중략..)

<Routes path='/' element={
	<div>
    	메인페이지
    <div>
}>
	<Route path='/About' element={<Detail/>}>
    	</Route path='location' element={<
        	<div>나는 nested routes</div>
        >}>
    </Route>
    <Route path='*' element={<div>나는 404</div>}
</Routes>

(..중략..)

function About(){
  return(
    <div>
      <h4>나는 About</h4>
      <Outlet></Outlet>  									// nested routes 위치
    </div>
  )
}

URL 파라미터는 섞어서 쓸 수 있다.

<Route path='/detail/:id' element={~}> 

styled component

let Yellowbtn = styled.button`
    background: yellow;
    color: black;
    padding: 10px;
`
<Yellowbtn>버튼<Yellowbtn/>

대문자로 시작. 다른 js 파일을 간섭하지 않는다. 페이지 로딩시간이 단축된다.
--▫ CSS로 오염되는 걸 막기 위해 App.module.css로 파일을 분리할 수도 있다.

let Yellowbtn = styled.button`
    background: ${props => props.bg};
    color: ${props => props.bg == 'blue' ? 'white' : 'black'};
    padding: 10px;
`

 <Box>
        <Yellowbtn bg='green'>벝은</Yellowbtn>
        <Yellowbtn bg='red'>벝은</Yellowbtn>
        </Box>

styled component에서 props를 가지고 일부만 수정해서 사용할 수 있다.
간단한 프로그래밍도 가능하다.

let newBtn = styled.button(Yellowbtn)``

스타일 복사도 가능하다