React 14

개인포폴, useEffect, useState 한번 더 정리

useEffect

useEffect는 리엑트(React) 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook(훅)이다.

 useEffect(콜백함수, [의존 함수])

useEffect는 2개의 인수를 받는데 첫 번째는 function(함수)으로써의 effect이고,

두 번째에 넣은 인수 상태가 바뀌면 첫 번째 인수를 재실행한다.

// 1. 기본( 잘 사용 안함)
useEffect(()=> {
    실행문
})
 
// 2. 
useEffect(()=> {
    실행문
},[]) // 여기서의 []의 뜻은 실행문을 1번만 실행하라는 뜻
 
// 3.
useEffect(()=> {
    실행문
},[의존변수]) // 변수가 바뀔때마다 실행(update)
 
// 4.
useEffect(()=> {
    실행문
    //이 방법을 effect의 뒷정리
    return()=> {
        실행문
    }
},[의존변수,의존변수]) //실행문이 2개라 의존변수 또한 2개
//뒷정리는 메모리 누수를 방지하기위해서 UI 컴포넌트를 제거하기 전에 실행한다.

useState

useState를 이용해서 간편하게 state값을 변경할 수 있다.

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부른다
  const [count, setCount] = useState(0);