Front-end

Front-end/React

[React] setTimeout으로 글씨 하나씩 등장시키기

타이머 생성 setTimeout() => { }, 1000); : 1초 후에 실행 타이머 지우기 clearTimeout(); 글씨 하나씩 등장시키기 const [displayIntro, setDisplayIntro] = useState(""); const [introIdx, setIntroIdx] = useState(0); const intro = "Hello! I'm Eunjin."; useEffect(() => { if (introIdx { setDisplayIntro(intro1.substring(0, introIdx + 1)); setIntroIdx(introIdx + 1); }, 130); return () ..

Front-end/React

[React] 리액트로 CRUD 기능 구현하기 axios

CREATE axios.post('/경로', {전달할객체데이터}) .then(response => { //데이터 처리 }) .catch(() => { 오류 발생시 }) READ axios.get('/경로/{pk}') .then(response => { //데이터 처리 }) .catch(() => { 오류 발생시 }) UPDATE axios.put('/경로/{pk}') .then(response => { //데이터 처리 }) .catch(() => { 오류 발생시 }) DELETE axios.delete('/경로/{pk}') .then(response => { //데이터 처리 }) .catch(() => { 오류 발생시 }) 받아온 데이터는 response.data json으로 반환됨 예시) @RestCo..

Front-end/React

[React] useEffect 사용

Mount : 페이지 로딩 Update : 페이지 재랜더링 unMount : 다른 페이지 로딩 Mount, Update 될 때 실행 useEffect(() => { //실행문 }); Mount 될 때만 실행 useEffect(() => { //실행문 }, []); a가 Update 될 때 실행 useEffect(() => { //실행문 }, [a]); a와 b 둘 다 Update 될 때 실행 useEffect(() => { //실행문 }, [a, b]); return 옵션 useEffect(() => { //실행문 return () => { //return 실행문 } }, []); return문은 useEffect 안의 내용이 실행되기 전에 실행됩니다. Mount할 때는 실행 안되고 unMount할 때 ..

Front-end/React

[React] 패스 파라미터로 값 전달 받기

Path Parameter path='/:패스파라미터/' 경로에 콜론을 넣으면 url에 /아무거나 아무거나 써도 해당 element의 컴포넌트가 띄어집니다. path:'/detail/:id/:age' 여러개도 가능! (보통은 하나만 전달함) 보통 상세페이지아 삭제나 업데이트 같이 PK를 필요로 할 때 이렇게 만듭니다! 패스 파라미터 값 전달받기 useParams() 전달된 패스 파라미터는 해당 컴포넌트에서 useParams()를 사용해서 값을 가져올 수 있습니다. 라우터의 기능이기 때문에 라우터 설치해줘야함! 여러개의 패스 파라미터가 전달되기 때문에 useParams()은 객체타입입니다! 스프링부트 컨트롤러에서 패스파라미터를 전달 받을 때는? @PathVariable

eunjin-park
'Front-end' 카테고리의 글 목록 (2 Page)