[React] 리액트 hooks

Hooks의 등장 배경

리액트 hook의 역사는 recompose 라이브러리에서 시작되었다.

 

recompose의 아이디어는 hook과 굉장히 흡사하다.

함수형 프로그래밍을 적용하여 개발되었으며, state를 주는 방식이다.

 

끝내 recompose 라이브러리는 리액트 팀에 의해 인수되었다. 2018년 10월 25일 recompose의 업데이트는 중단되었다.

Andrew Clark은 facebook 팀에 합류해서 hook을 릴리즈했다.

https://github.com/acdlite/recompose

GitHub - acdlite/recompose: A React utility belt for function components and higher-order components.

---

props

props (properties)는 컴포넌트 속성을 설정할 때 사용하는 요소이다.

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

 

state

state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 사용하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다는 것을 명심하자!

 

---

useEffect

렌더링 직후에, 컴포넌트가 뭘 해야 하는지 명시하는 부분으로 react 컴포넌트가 렌더링 될 때 마다 특정 작업을 수행하도록 설정할 수 있는 hook이다. 렌더링 후에 useEffect에 작성한 함수들이 실행이 된다. (클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 생각하면 쉽다.
주로 API를 사용해서 data를 받거나, event listener와 같은 작업을 수행한다.

 

useEffect 활용

1. 마운트될 때만 실행하고 싶을 때

useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 인수로 빈 배열을 넣어주면 된다.

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

 

2. 특정 값이 업데이트될 때만 실행하고 싶을 때

특정 값이 변경될 때만 호출하고 싶은 경우에는 두 번째 인수로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 된다.

배열 안에는 useState로 관리하고 있는 상태를 넣어 주어도 되고, props로 전달받은 값을 넣어주어도 된다.

useEffect(() => {
	console.log(email);
}, [email]);

 

3. 뒷정리 함수

useEffect는 렌더링되고 난 직후마다 실행되고, 두 번째 인수 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다.

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup) 함수를 반환해주어야 한다.

언마운트 될 때만 뒷정리 함수를 호출하고 싶다면 useEffect의 두 번째 인수에 비어있는 배열을 넣으면 된다.

useEffect(() => {
	console.log('useEffect');
	console.log(email);
    
    return () => {
    	console.log('cleanup');
        console.log(email);
    };
}, [email]);

 

---

useReducer

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

reducer는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 action값을 전달받아 새로운 상태를 반환하는 함수이다. reducer 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 한다.

function reducer(state, action) {
	return { ... };
}

// action 값 구성
{
	type: 'INCREMENT',
    // 또 다른 값...
}

 

---

useMemo

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

렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용한다.

 

---

useCallback

useMemo와 비슷한 함수로, 주로 렌더링 성능을 최적화해야 할 때 사용한다.

useCallback을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다.