[React] Hooks

react-hooks란?

• 기존에는 클래스 방식으로 컴포넌트 코드를 작성
• hooks는 함수 방식으로 컴포넌트 코드를 작성
• state 관리를 위한 코드가 간결해짐
• 값 변경시 클래스 방식은 render() 함수만 호출되지만 함수 방식은 작성한 코드를 모두 실행하기 때문에 hooks가 비교적 느릴 수 있음

useState

import React, {useState} from 'react';

const App = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>Basic</h1>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <div>{count}</div>
        </div>
    );
};

export default App;

useInput

import React, {useState} from 'react';

const useInput = (defaultValue) => {
    const [value, setValue] = useState(defaultValue);

    const onChange = (e) => {
        setValue(e.target.value);
    };

    return {value, onChange};
};

const App = () => {
    const input = useInput("empty");

    return (
        <div>
            <h1>Input</h1>
            <input placeholder="input" {...input}/>
            <div>{input.value}</div>
        </div>
    );
};

export default App;

useRef

import React, {useRef} from 'react';

const App = () => {
    const ref = useRef(null);

    return (
        <div>
            <h1>Ref</h1>
            <input placeholder="키를 누르면 커서 이동" onKeyDown={() => ref.current.focus()}/>
            <input ref={ref}/>
        </div>
    );
};

export default App;

useEffect

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

const useInput = (defaultValue) => {
    const [value, setValue] = useState(defaultValue);

    const onChange = (e) => {
        setValue(e.target.value);
    };

    return {value, onChange};
};

const App = () => {
    const useEffectInput = useInput("");

    useEffect(() => {
        console.log("componentDidMount, componentDidUpdate");

        return () => {
            // 값이 변경되기 직전 or unmount 시점에 호출
            console.log("componentWillUnmount");
        }
    }, [useEffectInput]);

    return (
        <div>
            <h1>useEffect</h1>
            <input {...useEffectInput}/>
        </div>
    );
};

export default App;

useImperativeHandle

• 부모 컴포넌트에게 자식 컴포넌트의 정보를 제공하는 방법
• 자식 컴포넌트에 ref를 걸어 함수를 호출할 수 있음
• ref를 걸 수 있도록 자식 컴포넌트는 forwardRef로 한 번 감싸주어야함
• forwardRef로 감싸진 자식 컴포넌트는 props, ref 두 개의 파라미터만 받을 수 있음

import React, {forwardRef, useImperativeHandle, useRef} from 'react';

const Child = forwardRef((props, ref) => {
    const alertHelloWorld = () => {
        alert("Hello World!");
    };

    useImperativeHandle(ref, () => ({
        alertHelloWorld
    }));

    return (
        <div>Hello World!</div>
    );
});

const App = () => {
    const ref = useRef();

    const onClick = () => {
        ref.current.alertHelloWorld();
    };

    return (
        <div>
            <Child ref={ref}/>
            <button onClick={onClick}>Alert</button>
        </div>
    );
};

export default App;

참고

• 강의
  • https://youtu.be/ZyOOdGBqZbk
  • https://youtu.be/yS-BU6eYUDE
  • https://youtu.be/2DFXAcck-DQ
• useImperativeHandle
  • https://stackoverflow.com/questions/37949981/call-child-method-from-parent
  • https://ko.reactjs.org/docs/hooks-reference.html#useimperativehandle