프론트엔드 정복하기

1. route를 만들 때 /video/:videoId 2. List에서 3. 디테일페이지에서 const variable = props.match.params.videoId ; (주소창에서 videoId로 입력된 id를 가져올 수 있음.) axios로 variable을 보낸다. 해당 정보들을 가져온다.

const OPTIONS = [ {value:1, label:"1번 옵션"}, {value:2, label:"2번 옵션"}, {value:3, label:"3번 옵션"}, {value:4, label:"4번 옵션"}, {value:5, label:"5번 옵션"},]const Component = () => { const [selectedValue, setSelectedValue] = useState(); const handleChange = (e) => { setSelectedValue(e.currentTarget.value) } return ( {OPTIONS.map((option)=>( {option.label} ..

1) useState 설정 const [Products, setProducts] = useState([]) const [loading, setloading] = useState(false) const [currentPage, setcurrentPage] = useState(1) const [productsPerPage, setproductsPerPage] = useState(10) 2) useEffect에서 데이터 불러오기 useEffect(() => { setloading(true); let body={category:'인생뷰티'} Axios.post('/api/product/lists', body) .then(response=>{ if(response.data.success){ setProducts(..

1) useEffect에서 server에서 데이터 불러오기 : (알맞은 조건을 설정하여..) (axios, find 메서드 사용) 2) if response.data.success 하면 => useState에 data 정보를 저장하기 ex ) [ Product, setProduct ] = useState( [ ] ) => state에 data 전체 정보가 array로 저장된다. 3) State에 mapping한다. Product . map ( (product, index) =>{ return ( { product.name } ) }) const [Products, setProducts] = useState([]) useEffect(() => { let body={category:'인생뷰티'} Axios...

/hoc/Register_AG_2_Restrict.j import React from 'react'; import {useSelector} from 'react-redux'; export default function(RegisterAG2stepComponent){ function CheckGoTo2step(props){ const user = useSelector(state => state.user); if(!user.agreeSave/* .agreeUsage && !user.agreeSave.agreePersonal */){ alert('잘못된 경로로 접근하셨습니다.') props.history.push('/register_agmall'); } return } return CheckGoTo2step ..

https://nearform.github.io/react-animation/