[React]React Hooks

1. Component와 Hook

• Hook은 함수 컴포넌트에서 사용하는 메소드이다. 함수 컴포넌트 이전에는 클래스(class) 컴포넌트가 있었는데, React 16.8 버전 이후부터 함수형 컴포넌트에서도 직관적인 함수를 이용하여 작업할 수 있게 만든 것이다.
• React의 공식문서에 따르면 Hook이란, React 16.8 버전부터 추가된 기능이다.
• 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능이다.

✍ Hook 사용 규칙

1. 리액트 함수의 최상위에서만 호출

• 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 수 있다.

2. 오직 리액트 함수 내에서만 사용되어야 한다.

• 일반 JavaScript 함수(리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 곳) 안에서 호출해서는 안 된다

✍ 함수형 컴포넌트와 클래스형 컴포넌트

• 함수형 컴포넌트(Function Component)

function Counter () {
    const [counter, setCounter] = useState(0);

    const handleIncrease = () => {
        setCounter(counter + 1)
    }

    return (
        <div>
            <p>You clicked {counter} times</p>
            <button onClick={handleIncrease}>
                Click me
            </button>
        </div>
    )
}

• 클래스형 컴포넌트(Class Component)

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        }
        this.handleIncrease = this.handleIncrease.bind(this);
    }

    handleIncrease = () => {
        this.setState({
            counter: this.state.counter + 1
        })
    }

    render(){
       return (
            <div>
                <p>You clicked {this.state.counter} times</p>
                <button onClick={this.handleIncrease}>
                    Click me
                </button>
            </div>
       ) 
    }
}

✍ useMemo

useMemo은 특정 값(value)를 재사용하고자 할 때 사용하는 Hook이다.

//props로 넘어온 value값을 Calculate라는 함수에 인자로 넘겨서 result 값을 구하고 있다.
function Calculator({value}){
	const result = calculate(value);
	return (
     <div>{result}</div>
   );
}

//만약 value 값이 렌더링될 때마다 계속 바뀌는 값이 아니라면 useMemo를 사용하여
//값을 어딘가에 저장해뒀다 값이 변경이 되면 렌더링되게 해준다.
//값이 바뀌지 않았다면 이전 렌더링의 value 값을 재활용한다.
function Calculator({value}){
	const result = useMemo(() => calculate(value), [value]);
	return (
     <div>{result}</div>
   );
}

✍ useCallback

useCallback은 특정 함수(function)를 재사용하고자 할 때 사용하는 Hook이다.

function Calculator({x, y}){
	const add = () => x + y;
	return <div>{add()}</div>
}
    
function Calculator({x, y}){
	const add = useCallback(() => x + y, [x, y]);
	return <div>{add()}</div>
}

✍ Custom Hooks