[리액트 쇼핑몰 만들기] useEffect, Ajax

·2022년 4월 8일
0

React

목록 보기
3/3
post-thumbnail

🍎 코딩애플 리액트 기초 강의를 통해 쇼핑몰 만들기 프로젝트를 진행하며 공부한 것들의 기록을 남긴다.

📌 컴포넌트의 lifecycle

⭐️ 컴포넌트는 등장(mount) - 업데이트(재렌더링) - 퇴장(unmount) 이라는 생명주기(life cycle)을 가진다.

  • lifecycle 의 중간 중간에 컴포넌트에게 을 통해 명령을 걸 수 있다.
    Ex) oo 컴포넌트 퇴장 전에 이것 좀 해주세요~.

📌 useEffect

useEffect 훅 사용 1️⃣

  • 컴포넌트 mount / update 될 때 특정 코드 실행
    Ex) Detail 페이지 방문 후 alert 창이 2초 후에 사라지게 하기

  • 형태
    useEffect(()=>{ 실행할 코드 })

useEffect 훅 사용 2️⃣

  • 컴포넌트 unmount 될 때 (사라질 때) 특정 코드 실행
  • 형태
    useEffect(()=>{ return ()=>{실행할 코드} })

useEffect 훅 사용 3️⃣

  • 여러개 사용하고 싶을 때 -> useEffect를 여러 개 적으면 적은 순서대로 실행

💡 useEffect 주의점

컴포넌트 mount 시 뿐만 아니라 update(재렌더링)될 때마다 실행된다.

  • Input 에 입력할 때마다 update가 발생함
    -> mount 시에만 실행하고 싶은 useEffect 어떻게?
    -> 두번째 매개변수인 실행조건을 넣어준다.
    특정 state가 변경될 때만, 혹은 mount 시에만 실행하게 해 줄수 있음!


    ➡️ 두 번째 매개변수
    [alert] -> alert라는 state가 변경될 때만 useEffect 실행한다~
    [] -> 실행조건에 부합하는 게 없으니 update시에 useEffect 실행 안한다~(mount 시에만 한 번 실행하고 끝)

💡 setTimeout 주의점

설정한 타이머 시간보다 빠르게 컴포넌트 상태 변경 시에 버그 발생 가능성 있음!

  • 컴포넌트 unmount 시 타이머 해제 스킬 필요 -> clearTimeout()


📌 Ajax

  • 서버에 새로고침 없이 페이지 요청을 할 수 있게 도와줌

1️⃣ 요청의 종류

GET 요청 : 특정 페이지 / 자료 읽기
POST 요청 : 로그인 정보 같이 서버로 중요 정보를 전달
-> 요청 시에 항상 새로고침 된다. (기존 브라우저 작동 방식)

2️⃣ Ajax 사용 방법

  1. 제이쿼리 라이브러리
  • $.ajax()
  1. axios 라이브러리
  • axios.get()
  • react.js, vue.js에서 많이 사용
  1. 바닐라 자바스크립트 문법
  • fetch()

2번째 방법인 axios 설치하고(npm install axios)
import axios from 'axios'

3️⃣ 더보기 버튼 만들기

더보기 버튼 눌렀을 때 상품 3개 더 보이게 하기

  • axios 문법
    axios.get(데이터 요청할 url) .then() -> 요청 성공 .catch() -> 요청 실패

  • Ajax로 가져온 데이터 출력하기
    .then((가져온 데이터)=>{})
    💡 Axios는 json으로 가져온 데이터를 보기 좋게 object로 바꿔줌


    ➡️ 데이터 요청이 성공하면 shoesCng 함수를 통해 shoe 복사본과 함께 ajax를 통해 가져온 데이터인 result.data 복사본도 더해준다.

profile
걸음마 개발 분투기

0개의 댓글