ajax 서버 서버에 데이터를 요청 서버 : 부탁하면 진짜로 들어주는 프로그램 ajax란 서버에 get, post 요청할 때 새로고침 없이 데이터를 주고 받을 수 있게 도와주는 간단한 브라우저 기능이다. ajax 사용해도 GET 요청 가능 ajax 이용한 GET요청은 axios.get(’url’) { axios.get('') }}>버튼 ajax 요쳥결과는 ajax.get(’url’).then() 서버가 보낸 실제 핵심 데이터 보려면 console.log(결과.data) { axios.get('') .then((결과) => { console.log(결과.data) }) 실제 결과 catch ajax 요청이 실패할 경우 catch로 이용해서 실패하면 띄울 코드 { axios.get('') .then((결과)..

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 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다. ..