[ React 5 ] Hook , Ajax

이전 작성 글

2021.07.03 - [분류 전체보기] - [ React 01 ] React 설치 및 시작 , JSX 문법 , State

2021.07.04 - [분류 전체보기] - [ React 02 ] React Component 문법, 반복문 - Map, for, Props, input을 받아서 데이터처리, 옛날에 react 사용법

2021.07.05 - [PROGRAMMING/React] - [ React 03 ] 부트스트랩 & React 쓰기, import / export 문법, Component 화 , 반복문 map

2021.07.06 - [PROGRAMMING/React] - [ React 04 ] 라우트, Link, Switch, history ,URL 파라미터, styled-components, SASS

 

: 코딩애플 강의를 공부하고 정리한 내용입니다.

---

 

1. Hook 

: 컴포넌트의 lifecycle 이 종료되기전에 hook을 처리해달라는 것

 

1. 옛날 코드 : Lifecycle Hook

:  componentDidMount - 컴포넌트가 mount 되었을 때 실행할 코드

    - Ajex 같은 경우 여기에 넣게 됨 

componentWillUnmount - 컴포넌트가 사라질때  실행하는 코드 

class Detail2 extends React.Component{
    componentDidMount(){

    }
    componentWillUnmount(){
        
    }
}

 

2. 요즘 코드 : useEffect

: useEffect 훅은 컴포넌트가 mounte 되었을 때, 컴포넌트가 update될 때, 특정 코드를 실행할 수 있음 

  useEffect는 여러개 실행 가능하지만, 순서대로 실행됨.

useEffect(() =>{
console.log(11111)
})

 

- 예1 ) 2초후에 alert 창이 사라지게 하고 싶다면, useEffect 안에 코드를 짜면 됨

 

    - ui 화면

{
  alert === true
  ? ( <div className="my-alert2">
      <p>재고가 얼마 남지 않았습니다.</p>
      </div>)
  : null
}

   - 기능 구현

useEffect(() =>{
        let 타이머 = setTimeout(()=>{ alert변경(false) }, 2000)
    })

 

- 예2) 컴포넌트가 사라질때 코드를 실행시킴

useEffect(() =>{
        return function 함수(){사라질때 실행할 코드}
    })

 

* 시작 뿐만아니라, update가 될때에도 반응하기 때문에 예상치 못한 오류가 발생할 수도 있음

: 예를 들어, input 을 하면, input에 무언가 입력할 때마다 재렌더링이 일어남 

따라서, [] 을 넣어서, 조건을 만들어줌. - 그냥 [] 넣어주면 처음 실행될때만 실행된다. 

    let [alert, alert변경] = useState(true); // alert의 상태가 보이는지 안보이는지 지정
    let [inputData, inputData변경] = useState();
    
    useEffect(() =>{
        let 타이머 = setTimeout(()=>{ alert변경(false) }, 2000)
    },[alert]) 

 

* setTimeout() 같은 시간에 대한 코드를 적을 때는, 발생이 꺼지기 전에 다른 행동을 하면 문제가 발생할 수있다.

: 따라서, 해제를 하는 스킬을 사용한다.

    useEffect(() =>{
        let 타이머 = setTimeout(()=>{ alert변경(false) }, 2000);
        return () =>{clearTimeout(타이머)}
    },[alert])

 

 

2. Ajax 

1. Ajax 란

: 서버에 새로고침없이 요청을 할 수 있게 도와주는 것

 

요청

a. get요청  : 특정페이지/ 자료읽기

b. post 요청 : 정보를 숨겨서 서버로 중요 정보 전달

 

2. Ajax를 사용하는 방법

1. jQuery Ajax를 쓰기

2. axios 설치해서 쓰기

3. 쌩자바스크립트 fetch()를 쓰기

 

-> 리액트 개발환경에서는 axios , fetch()를 많이 사용

 

3. Ajax - axios 설치

a. 터미널에 axios 설치

(base) leehjung01:shop hwajeong$ npm install axios

 

b. import 하기

import axios from 'axios';

 

4. Ajax 

a. 버튼을 누르면, 서버에서 데이터를 요청하는 코드

: axios.get - 서버에 get요청. fetch를 이용해도 사용법이 거의 똑같음.

하지만, axios 는 json 자료형을 object로 변환시켜줌. fetch는 따로 변환시켜주는 작업을 해야함

<button className='btn btn-primary' onClick={() => {
          axios.get('https://codingapple1.github.io/shop/data2.json'); 
          // 서버에 get요청하는 코드  - () 에 요청할 url 넣기. 서버개발자는 알거다..ㅎ
        }}>더보기</button>

 

-  성공하면 .then() 함수 , 실패하면 .catch() 함수

<button className='btn btn-primary' onClick={() => {
  axios.get('https://codingapple1.github.io/shop/data2.json')
  .then((result) =>{
  console.log(result.data)
  })
  .catch(() =>{})

 

- 더보기를 누르면, 아래 서버에서 json 을 불러와서, shoes를 변경해주는 코드

... 해줌으로써 대괄호를 벗기고, 다시 [] 를 씌윔으로써, 새로운 객체로 copy 해주는 것

<button className='btn btn-primary' onClick={() => {
  axios.get('https://codingapple1.github.io/shop/data2.json')
  .then((result) =>{
  console.log(result.data);
  shoes변경([...shoes, ...result.data])
  })
  .catch(() =>{})
}}>더보기</button>

 

b. 서버에 데이터를 보내고 싶을 때 - post 

axios.post('서버url', {id :'coding', pw : 1235 })

 

- 결과