React Hook State & Effect

훅(HOOK) 

리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉨

 

리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능

 

함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부름 (useState, userEffect 등)

 

리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능

 

훅의 규칙

최상위 에서만 Hook을 호출해야 함

- 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안됨

- 이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장

 

리액트 함수 컴포넌트에서만 Hook을 호출해야 함

 

기본 훅

useState(초기값) 

useState() : 배열반환 
첫번째 배열의 요소에는 현재값을, 두번째 요소는 상태를 변경하는 (setter) 를 반환
 

const [data, setData] = useState('초기값')

---

useEffect(실행시킬 콜백함수, 값에 따른 렌더링 지정 ) 

userEffect의 첫번째 매개변수는 실행시킬 콜백함수

userEffect의 두번째 매개변수는 배열[ ]을 사용하여 특정값이 update 될 때만 실행시켜 줄 수 있음

 

useEffect() 는 컴포넌트의 라이프 사이클을 다룸
리액트 컴포넌트가 mount, mount이후, unmount때 마다 특정작업을 수행

라이프 사이클

mount 이후 - 컴포넌트가 마운트 됨, 즉 컴포넌트의 첫번째 렌더링이 마치면 호출되는 메서드

클래스형 componentDidMount() 대체

 

함수형 훅

useEffect( () => {
	console.log(`렌더링완료`);
});

 

mount 이후 업데이트 될 때는 실행되지 않으려면, 두번째 매개 변수 배열을 줌

useEffect( () => {
	console.log(`처음만 실행됩니다`);
}, []);​

 

update 이후 - 특정값에 의해 컴포넌트가 업데이트 되고 난 후 발생합니다.

클래스형 componentDidUpdate() 대체

 

함수형 훅

const HookEffect = () => {
    //useState
    const[name, setName] = useState('');
    const handleName = (e) => {
        setName( e.target.value );
    }

    //특정값이 업데이트 될 때만 실행해주려면 두번째 매개변수에 값을 state값을 지정합니다
    useEffect( () => {
        console.log(`name이 업데이트 시 실행됩니다`)
    }, [name]);

    return (
        <div>
            
            이름:<input type="text" onChange={handleName}/><br/>
            이름:{name}
        </div>
    )
}

export default HookEffect;

 

예시

import { useEffect, useState } from "react";


const HookEffect = () => {

    const [name, setName] = useState('');
    const [age, setAge] = useState('');

    const handleName = (e) => {
        setName(e.target.value);
    }
    const handleAge = (e) => {
        setAge(e.target.value);
    }

    //useEffect(함수) - 화면이 mount된 이후에 동작
    useEffect(() => {
        console.log(`렌더링 완료. state값: ${name}`)
    })


    //useEffect(함수, []) - 화면이 첫번째 mount에서만 동작
    useEffect(() => {
        console.log(`처음만 실행됩니다`)
    }, [])

    //useEffect(함수, [state]) - 특정값이 렌더링 될 때만 동작
    useEffect(() => {
        console.log(`age or name이 변경될 때 실행됩니다`)
    }, [age, name])

    console.log(111);

    return (
        <>
            이름: <input type="text" onChange={handleName} /><br />
            나이: <input type="text" onChange={handleAge} /><br />

            이름: {name}, 나이: {age}
        </>
    )
}
export default HookEffect;