Lifecycle/ hook 컴포넌트의 Lifecycle 페이지에 장착되기도 한다.(mount) 조작하면 업데이트(update) 필요 없으면 제거(unmount) useEffect 이 라이프 주기를 안다면 중간 간섭이 가능함. 간섭 - 코드실행 간섭할 때 코드를 중간중간에 갈고리 달아서 함 컴포넌트 갈고리 다는법 이거는 클래스형 - 안씀 class Detail extends React.Component { componentDidMount(){ //컴포넌트 mount시 여기 코드 실행 } componentDidUpdate(){ //컴포넌트 update시 여기 코드 실행 } componentWillUnmount(){ //컴포넌트 unmount시 여기 코드 실행 } } 함수형 이거를 주로 씀 function ..

styled-components js파일 안에 다 집어넣고 싶다. import styled from ‘styled-componets’ 장점 1. CSS파일을 안열어도 된다. let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; ` 장점 2. 스타일이 다른 js파일로 오염되지 않음 → 그 페이지에 사용된 것은 그 페이지에서만 사용이 가능 오염 방지하려면 컴포넌트.module.css 라고 지으면 된다. → 컴포넌트의 스타일에 종속되게 할 수 있다. ex) App.module.css 면 App에 종속됨 장점 3. 페이지 로딩 시간 단축 장점4. 기존의 스타일 복사 가능 let YellowBtn = styled.but..

URL 파라미터로 상세페이지 100개 페이지를 여러개 만들고 싶을 땐 :URL 파라미터 써도 된다. /detail/아무거나 유저가 URL 파라미터에 입력한 거 가져오려면 useParams function Detail(props) { let {id} = useParams(); url 파라미터 만들 때 여러개 가능

router 2: navigate, nested routes, outlet 페이지 이동을 도와주는 useNavigate() - 아래 함수를 실행하면 페이지 이동됨 { navigate('/detail')}}>상세페이지 앞으로, 뒤로 이동 { navigate (1) }}>Home 앞으로 1 페이지 이동 { navigate(-1) }}>Home -1 페이지 이동 404 페이지는 아래 코드로 입력

리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 청므으로 렌더링 할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. 이때 컴포넌트의 라이프사이클 메서드를 사용한다. 참고로 라이프 사이클 메서는 클래스형 컴포넌트에서만 사용할 수 있다. 함수 컴포넌트를 사용할 수 없다. 함수 컴포넌트에서는 사용할 수 없다. 그 대신 Hooks 기능을 사용하여 비슷한 작업을 처리 할 수 있다. 1. 라이플사이클 메서드의 이해 라이플사이클 메서드의 종류는 총 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다. ..

const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; 코드가 다음 형태로 반복 된다. 지금은 li만 있어서 크게 문제가 되지 않지만, 코드가 복잡해진다면 용량도 늘어나면서 효율적이지 못하다. 그리고 보여줘야할 데이터가 유동적이라면 코드 관리가 힘들 것이다. 1. 자바스크립트 배열의 map()함수 2. 문법 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) 이 함수..