React.js (4) React Hook (useState, useEffect)

Bada Jung·2022년 1월 10일
0

React

목록 보기
4/11
post-thumbnail

useState

컴포넌트에서 바뀌는 값 관리하기

사용 방법

import

import React, { useState, useEffect } from "react";

변수 선언

const [user, setUser] = useState(null)

현 user 값은 null 이다.

axios get 호출로 user table 속 모든 데이터를 호출한다면,

unction searchUser() {
        const url = "/api/user";
        axios.get(url)
            .then(function (response) {
                setUser(response.data);
            })
    }

response.data 에서 호출된 값이
setUser() 메서드에 선언 되어

user 값은 user table 속 모든 데이터가 Object 형태로 선언된다.

useEffect

현재 페이지를 마운트 하기 위하여, 사용하는 Hook 로

  useEffect(() => {
    searchUser();
  }, []);

불필요한 Method 호출을 피하기 위하여 useEffect Hook를 사용하여 한번 호출

또한 [] 속에 특정 값을 선언하여 특정값이 업데이트될 때마다 마운트되도록 한다.

profile
🌊🌊Under the SEA🌊🌊

0개의 댓글