8장 Hooks

mini·2022년 8월 26일

Hooks ?
함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수컴포넌트에서 할수 없던 작업을 할수있게 해준다.

    import { useState } from 'react';
    
    const Counter = () => {
	const [value, setValue] = useState(0); 

	return (
		<div>
			<p>
				현재 카운터 값은 <b>{value}</b> 입니다.
			</p>
			<button onClick={() => setValue(value + 1)}>+1</button>
			<button onClick={() => setValue(value - 1)}>-1</button>
		</div>
	)}
    export default Counter;
    
    -> 함수 컴포넌트에서 상태 관리를 하기위해 컴포넌트 코드를 굳이 클래스 형태로 변환할 필요가 없어서 편리

useEffect

useEffect는 리액트 컴포넌트가 렌더링 때마다 특정 작업을 수행 하도록 설정 할수있는 Hook이다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate를 합친 형태.
마운트 될 때만 실행하고 싶다면

	useEffect(() => {
		console.log('마운트 될 때만 실행된다.')
	}, [])

두번째 파라미터로 비어있는 배열을 넣는다.

특정 값이 업데이트될때만 실행 하고 싶다면?

useEffect의 두번째 파라미터로 전달 되는 배열 안에 검사하고 싶은 값을 넣어준다.

뒷정리하기

useEffect는 기본적으로 렌더링 되고 난 직후마다 실행되며, 두번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다. 컴포넌트가 언마운트되기 전이나 업데이트 되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup) 함수를 반환 해주어야한다.

useReducer

useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook이다. 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환하는 함수. 리듀서 함수에서 새로운 상태를 만들 떄는 반드시 불변성을 지켜주어야 한다.

function reducer(state, action) {
	return(...); // 불변성을 지키면서 업데이트한 새로운 상태를 반환.
}

액션 값은 주로 다음과 같은 형태로 이루어져 있다.

{
	type: 'INCREMENT'
    //다른 값들이 필요하다면 추가로 들어감
}

17장에서 다들 리덕스에서 사용하는 액션 객체에는 어떤 액션이지 알려주는 type 필드가 꼭 있어야 하지만 useReducer에서 사용하는 액션 객체는 반드시 type을 지니고 있을 필요가 없다

인풋상태 관리하기

기존에 클래스형 컴포넌트에서 input 태그에 name 값을 할당하고 e.target.name을 참조해서 setState를 해준것과 유사한 방식으로 작업을 처리할수있다.

useMemo

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

useCallback

주로 렌더링 성능을 최적화 해야 하는 상황에 사용됨. 만들어 놨던 함수를 재사용할수있다.

useRef

함수 컴포넌트에서 ref를 쉽게 사용할수 잇게 한다.

로컬 변수 사용하기

- 클라스 형태
class MyComponent extends Component {
	id = 1
    setId = (n) => {
    	this.id = n;
    }
    printId = () => {
    	console.log(this.id)
    }
    render() {
    	return(
        	<div>
            	MyComponent
            </div>
        )
    }
}

- 함수 형태
const RefSample = () => {
	const id = useRef(1);
    const setId = (n) => {
    	id.current = n;
    }
    const prinId = () => {
    	console.log(id.current)
    }
    return (
    	<div>
        	refsample
        </div>
    )
}