[REACT] HOOKS

REACT HOOKS

useState

함수형 컴포넌트에서 상태 관리하기 위해 사용

import React, { useState } from 'react';

const Info = () => {
    const [name,setName] = useState();
    const [nickname,setNickname] = useState();

    const onChangeName = e => {
        setName(e.target.value);
    }
    const onChangeNickname = e => {
        setNickname(e.target.value);
    }

    return (
        <div>
            <input value={name} onChange={onChangeName}/><br/>
            <input value={nickname} onChange={onChangeNickname}/><br/>
            <span>이름:{name}</span><br/>
            <span>닉네임:{nickname}</span>
        </div>
    );
}

export default Info;

useEffect

1. 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 때 사용
2. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방

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

const Info = () => {
    const [name,setName] = useState();
    const [nickname,setNickname] = useState();

    useEffect(() => {
        console.log('렌더링이 완료되었습니다.');
        console.log({
            name,
            nickname
        })
    })

    const onChangeName = e => {
        setName(e.target.value);
    }
    const onChangeNickname = e => {
        setNickname(e.target.value);
    }

    return (
        <div>
            <input value={name} onChange={onChangeName}/><br/>
            <input value={nickname} onChange={onChangeNickname}/><br/>
            <span>이름:{name}</span><br/>
            <span>닉네임:{nickname}</span>
        </div>
    );
}

export default Info;

글자를 입력할 때 마다 렌더링하므로 useEffect가 실행된다.

---

1. 처음 렌더링될 때, 업데이트 될 때 실행된다.

    useEffect(() => {
        console.log('렌더링이 완료되었습니다.');
        console.log({
            name,
            nickname
        })
    });

2. useEffect 의 두번째 파라미터로 빈값을 넣어주면 처음 렌더링 할 때만 실행되고 업데이트 할 때는 실행되지 않는다.

    useEffect(() => {
        console.log('렌더링이 완료되었습니다.');
        console.log({
            name,
            nickname
        })
    },[]);

3. 특정 값이 업데이트 될 때만 실행해주고 싶을때. (name이 업데이트 될 때만 실행된다)

    useEffect(() => {
        console.log('렌더링이 완료되었습니다.');
        console.log(
            name
            )
    },[name]);

cleanup

    useEffect(() => {
        console.log('effect');
        console.log(name);
        return () => {
            console.log('cleanup');
            console.log(name);
        }
    });

• useEffect는 렌더링 후에 실행된다.
• 두번째 파라미터에 뭘 넣느냐에 따라 실행조건이 달라진다.
• 컴포넌트가 언마운트 되기 전이나 업데이트 되기 전에 실행해주고 싶을때 cleanup(뒷정리) 함수를 반환해 주어야 한다. return 부분

useReducer

useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해 주고 싶을때 사용

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'INCREMENT':
            return {value:state.value + 1}
        case 'DECREMENT':
            return {value:state.value - 1}
        default:
            break;
    }
}

const Counter = () => {
    const [state, dispatch] = useReducer(reducer, {value:0});

    return (
        <div>
            <p>
                현재 카운터 값은 <b>{state.value}</b>입니다.
            </p>
            <button onClick={() => dispatch({type: 'INCREMENT'})}>+1</button>
            <button onClick={() => dispatch({type: 'DECREMENT'})}>-1</button>
        </div>
    )
}

export default Counter;

 

useMemo

• useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.

useCallback

• useMemo와 상당히 비슷한 함수
• 주로 렌더링 성능을 최적화해야 하는 상황에서 사용
• 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다

useRef

• 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해 준다

커스텀 Hooks 만들기

• 여러 컴포넌트에서 비슷한 기능을 공유할 경우, 커스텀하여 만들 수 있다.

다른 Hooks

• 다른 개발자가 만든 Hooks도 사용할 수 있다.