본문 바로가기

프론트엔드로 가는 길/react13

05. LifeCycle & UseEffect 컴포넌트의 LifeCycle 페이지에 장착되기도하고 (mount) 가끔 업데이트도 되고 (update) 필요없으면 제거되고 (unmount) useEffect useEffect(() => {},[]) // mount,update(재렌더링)시 코드 실행 useEffect(() => { // 쓸데없는, 오래걸리는 코드는 여기에 적는 것이 관습 // ex) 어려운연산, 서버에서 데이터 가지고 올 때, 타이머 }); 실행시점 : html 렌더링이 다 되고나서 실행 return () => {} clean up function - useEffect 동작 전에 실행이 됨 - mount시에는 실행안됨, unmount시 실행됨 4. useEffect 실행 전에 뭔가를 실행 시키려면 return () => {} 5. 특정.. 2022. 12. 24.
04. localeCompare (문자정렬) Q. sort()로 문자 정렬은 어떻게 하나요? localeCompare 참조 문자열이 정렬 순서에서 앞 또는 뒤에 오는지 또는 주어진 문자열과 같은지를 숫자로 반환 var lang = [ { name: "Typescript", level: 5 }, { name: "Javascript", level: 5 }, { name: "Scala", level: 5 }, { name: "F#", level: 5 }, { name: "Java", level: 5 }, { name: "Apple", level: 5 }, { name: "C++", level: 5 }, ]; lang.sort((a, b) => a.name.localeCompare(b.name)); 참고블로그 : https://m.blog.naver.co.. 2022. 12. 23.
03. find() 함수로 원하는 요소 반환 find() array자료.find(()=>{ return 조건식 }) 함수는 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 값을 즉시 반환합니다. 조건을 일치하는 경우가 없다면, undefined를 반환합니다. Q. useParams에 일치하는 Id가 아닌 object가 지닌 id 값으로 페이지를 찾으려면 어떻게 해야하나요? import React from "react"; import { useParams } from "react-router-dom"; const Item = (props) => { let { id } = useParams(); const ItemId = props.shoes.find((e) => e.id == id); return ( {ItemId.title} {ItemI.. 2022. 12. 23.
02. router 셋팅하기 1. router 설치 npm i react-router-dom@6 2. index.js import { BrowserRouter } from "react-router-dom"; 3. 컴포넌트를 import 해오기 import { Routes, Route, Link } from "react-router-dom"; Route : page 홈 Navigate 페이지 이동을 도와주는 함수 let navigate = useNavigate(); { navigate("/detail"); }} > Detail { navigate(1); }} > Gift (1) onClick으로 경로이동시키기 navigate("/경로") (2) navigate(num) ->(1) 앞으로 한페이지 이동해주세요 (-1)뒤로 한페이지 이동.. 2022. 12. 23.

티스토리툴바