React) Hook - useState(), useEffect()

Hook

클래스형 컴포넌트에서만 사용 가능했던 state와 lifeCycle을 함수형 컴포넌트에서도 사용 가능하도록 도와준다.

 

Hook의 규칙

1. 최상위 단계서만 호출가능 - 반복문, 조건문, 중첩된 함수 내부에서 호출하면 안된다.

2. Hook은 React 함수형 컴포넌트 안에서만 호출가능!

 

useState() 사용법

const [변수명, set함수명] = useState(초기값);

useState() 사용 예시

import React, {useState} from 'react';

function Counter(props) {
    const [count, setCount] = useState(0);

    return ( 
        <div>
            <p> 총 {count}번 클릭했습니다. </p>
            <button onClick={ () => setCount(count + 1)}>클릭</button>
        </div>
    );
}

export default Counter;

 

 

useEffect() 사용법

useEffect(이펙트 함수, 의존성 배열);

useEffect(() => {
     // 컴포넌트가 마운트 된 이후,
     // 의존성 배열에 있는 변수중 하나라도 값이 변경되었을 때 실행됨
     // 의존성 배열에 빈 배열을 넣으면 마운트와 언마운트시에 단 한번씩만 실행됨
     // 의존성 배열 생략시 컴포넌트 업데이트 시마다 실행됨

     return() => {
     // 컴포넌트가 마운트 해제되기 전에 실행됨

     }
}, [의존성 변수1, 의존성 변수2,....]);

 

effect function이 mount, unmount시에 단 한번씩만 실행됨

- 빈배열을 준다.

useEffect(이펙트 함수, []);

 

 useEffect() 사용 예시

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

function Counter(props) {
    const [count, setCount] = useState(0);

    // componentDidMount, componentDidUpdate와 비슷하게 작동합니다.
    useEffect(() => {
        //브라우저 API를 사용해서 document이 title을 업데이트 합니다
        document.title = `You clicked ${count} times`;
    })
    return ( 
        <div>
            <p> 총 {count}번 클릭했습니다. </p>
            <button onClick={ () => setCount(count + 1)}>클릭</button>
        </div>
    );
}

export default Counter;