🍎 코딩애플 리액트 기초 강의를 통해 쇼핑몰 만들기 프로젝트를 진행하며 공부한 것들의 기록을 남긴다.
⭐️ 컴포넌트는 등장(mount) - 업데이트(재렌더링) - 퇴장(unmount) 이라는 생명주기(life cycle)을 가진다.
컴포넌트 mount / update 될 때 특정 코드 실행
Ex) Detail 페이지 방문 후 alert 창이 2초 후에 사라지게 하기
형태
useEffect(()=>{ 실행할 코드 })
useEffect(()=>{ return ()=>{실행할 코드} })
컴포넌트 mount 시 뿐만 아니라 update(재렌더링)될 때마다 실행된다.
Input 에 입력할 때마다 update가 발생함
-> mount 시에만 실행하고 싶은 useEffect 어떻게?
-> 두번째 매개변수인 실행조건을 넣어준다.
특정 state가 변경될 때만, 혹은 mount 시에만 실행하게 해 줄수 있음!
➡️ 두 번째 매개변수
[alert] -> alert라는 state가 변경될 때만 useEffect 실행한다~
[] -> 실행조건에 부합하는 게 없으니 update시에 useEffect 실행 안한다~(mount 시에만 한 번 실행하고 끝)
설정한 타이머 시간보다 빠르게 컴포넌트 상태 변경 시에 버그 발생 가능성 있음!
컴포넌트 unmount 시 타이머 해제 스킬 필요 -> clearTimeout()
GET 요청 : 특정 페이지 / 자료 읽기
POST 요청 : 로그인 정보 같이 서버로 중요 정보를 전달
-> 요청 시에 항상 새로고침 된다. (기존 브라우저 작동 방식)
- 제이쿼리 라이브러리
- $.ajax()
- axios 라이브러리
- axios.get()
- react.js, vue.js에서 많이 사용
- 바닐라 자바스크립트 문법
- fetch()
2번째 방법인 axios 설치하고(npm install axios
)
import axios from 'axios'
더보기 버튼 눌렀을 때 상품 3개 더 보이게 하기
axios 문법
axios.get(데이터 요청할 url) .then() -> 요청 성공 .catch() -> 요청 실패
Ajax로 가져온 데이터 출력하기
.then((가져온 데이터)=>{})
💡 Axios는 json으로 가져온 데이터를 보기 좋게 object로 바꿔줌
➡️ 데이터 요청이 성공하면 shoesCng 함수를 통해 shoe 복사본과 함께 ajax를 통해 가져온 데이터인 result.data 복사본도 더해준다.