[RN] React Hook

안녕-하요! 민디입니다! 🤭
다시 또 오랜만에 돌아왔습니다~ 요즘에 날씨가 왔다리 갔다리 해서 난리네요~
다들 이런 날씨에 몸 관리 잘 하시구!

자 그럼 오늘은 본격적으로 무엇에 대해 이야기를 해볼 것이냐!
React Native 를 하면서 필수적인 요소 중에 하나인 React Hook 에 대해서 알아보려고 합니다.

이전에는 React 고, React Native 고 모두 클래스형 컴포넌트를 만드는 것이 기본이었다면, 요즘에는 함수형 컴포넌트로 개발하는 것이 추세라고 합니다!

근데 만약 클래스형 컴포넌트에서만 작동했던 상태 관리와 생명 주기 기능을 함수형에서 어떻게 사용해야 할까요? 클래스형 컴포넌트와 똑같이? 그렇게 된다면 좋겠지만 아쉽게도 불가능합니다.

그렇기 때문에 나온 것이 바로 React Hook 이라는 친구입니다.
간단하게 이야기하자만 함수형 컴포넌트에서도 상태 관리와 생명주기 기능을 사용할 수 있도록 해주는 함수입니다!

자 그럼 본격적으로 시작해볼까요?! 가보자고~

React Hook 이란?

제일 먼저 알아볼 개념입니다! 위에서도 잠깐 이야기했지만 React Hook 이란,

• 함수형 컴포넌트에서 상태 관리와 생명 주기 기능을 사용할 수 있도록 해주는 함수
• 클래스형 컴포넌트에서만 사용 가능했던 기능들을 함수형 컴포넌트에서도 간편하게 사용할 수 있다.

라고 설명을 할 수 있습니다. 그렇다면 기존의 클래스형 컴포넌트의 생명주기도 알아봐야겠죠?

React component 생명 주기

클래스형 컴포넌트의 생명 주기는 크게 Mount, Update, Unmount 로 나눌 수 있습니다.
뜻 그대로 컴포넌트가 생성 되었을 때, 업데이트 되었을 때, 제거되었을 때 인 것이죠
각각의 단계에서 무슨 일이 일어나는 지는 아래 이미지가 아주 친절하게 설명해주고 있습니다.

그리고 각각의 단계에서 호출이 되는 메소드들이 있죠, 이 친구들을 이용해 저희는 실제 작업을 할 때 적재적소에 코드를 작성할 수 있기도 합니다.

그럼 하나씩 살펴볼까요?

Mounting

• 컴포넌트가 생성되고 DOM 트리에 추가되는 단계입니다.
• constructor()
• static getDerivedStateFromProps()
  -> state 를 갱신하기 위한 객체를 반환하거나, null 을 반환하여 아무 것도 갱신하지 않을 수 있습니다.
  -> 이유와 상관 없이 렌더링 때마다 매번 실행됩니다.
• componentDidMount()

Updating

• 컴포넌트의 props 또는 state 가 변경될 때 호출되는 단계입니다.
• state getDerivedStateFromProps()
• shouldComponentUpdate()
• getSnapshotBeforeUpdate()
  -> 컴포넌트가 업데이트 되기 전에 호출됩니다.
  -> DOM 요소의 스냅샷을 만들 수 있습니다.
• render()
• componentDidUpdate()
  -> DOM 조작, 데이터 동기화 등의 작업을 수행합니다.
  

Unmounting

• 컴포넌트가 DOM 트리에서 제거되는 단계입니다.
• componentWillUnmount()
  -> DOM 트리에서 제거되기 전에 호출됩니다.
  -> 구독 해제, 이벤트 제거, 리소스 해제 등의 작업을 수행합니다.

이렇게 React Component 의 생명주기가 있습니다. 클래스 컴포넌트의 생명주기에 대해서 알아보았다면, 이제 함수형 컴포넌트의 생명주기에 대해 알아봅시다!

React Hook 의 생명 주기

React Hook 을 사용하게 되면, 기존 클래스형 컴포넌트에서 사용하던 생명주기 메서드 대신 훅을 사용하여 코드를 더욱 간결하고 효율적으로 작성할 수 있습니다!

그럼 각각의 Hook 에 대해 알아보자면 다음과 같습니다.

useState

• useState 훅을 사용하여 선언된 상태 변수는 컴포넌트가 마운트 될 때 초기화됩니다.
• 컴포넌트가 업데이트 될 때 useState 훅에서 반환되는 setter 함수를 사용하여 상태 변수를 업데이트 할 수 있습니다.
• 컴포넌트가 언마운트 될 때 상태 변수는 더 이상 사용되지 않습니다.

const [state, setState] = useState(0);

useEffect

• 컴포넌트가 렌더링 된 직후에 한 번 실행됩니다.
• 두 번째 인자는 배열이며, 이 배열에 의존하는 값을 지정하면 해당 값이 변경될 때마다 useEffect 훅이 다시 실행됩니다.
• 컴포넌트가 언마운트 되기 전에 useEffect 훅에서 반환되는 cleanup 함수가 실행됩니다.

useEffect(() => {
  // code
}, [])

useContext

• 컴포넌트가 마운트 될 때 컨텍스트 값을 가져옵니다.
• 컨텍스트 값이 변경될 때 컴포넌트는 다시 렌더링됩니다.
• 단계마다 일일이 props 를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

const AppContext = React.createContext();

<AppContext.Provider value={values}>
 /* 컴포넌트 */
</AppContext.Provider>

const myContext = useContext(AppContext);

useReducer

• 컴포넌트가 마운트 될 때 초기 상태를 설정합니다.
• 컴포넌트가 업데이트 될 때 useReducer 훅에서 반환되는 dispatch 함수를 사용하여 상태를 업데이트 할 수 있습니다.

useRef

• 컴포넌트가 마운트 될 때 참조 객체를 생성합니다.
• 컴포넌트가 업데이트 될 때 useRef 훅에서 반환되는 current 속성을 사용하여 참조 객체의 값을 변경할 수 있습니다.

const imageRef = useRef(null);

useCallback

• 컴포넌트가 마운트 될 때 함수를 메모이제이션합니다.
• 컴포넌트가 업데이트 될 때 의존하는 값이 변경되지 않으면 useCallback 훅에서 반환된 메모이제이션된 함수가 사용됩니다.

const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
}, []);

useMemo

• 컴포넌트가 마운트 될 때 값을 메모이제이션합니다.
• 컴포넌트가 업데이트 될 때 의존하는 값이 변경되지 않으면 useMemo 훅에서 반환된 메모이제이션된 함수가 사용됩니다.

useMemo(() => { /* 로직 */ }, []);

요렇게 Hook 이 존재합니다. 필요한 곳에 맞는 Hook 을 사용해보세요!

Hook 규칙

그렇다면 Hook 의 규칙에는 무엇이 있을까요? 거두절미하고 바로 알아보도록 하죠!

1. 리액트 함수 내에서만 Hook 을 호출해야 한다.

• Hook은 일반적인 js 함수에서는 호출하면 안됩니다.
• 함수형 컴포넌트나 custom hook 에서는 호출이 가능합니다.

2. 최상위에서만 Hook 을 호출해야 한다.

• 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook 을 호출해서는 안됩니다.
• 리액트 훅은 호출되는 순서에 의존하기 때문에, 해당 부분을 건너뛰는 일이 발생할 수도 있어, 순서가 꼬여 버그가 발생할 수도 있기 때문입니다.
• 이 규칙을 따르면 useState 와 useEffect 가 여러번 호출되는 경우에도 Hook 의 상태를 올바르게 유지할 수 있습니다.

그렇다면 마지막으로 위에 소개한 Hook 중에서 자주 사용하는 Hook 에 대해 조금 더 알아볼까요?

자주 사용하는 Hook

useState

useState 는 상태를 관리하는 훅 입니다.

• 함수형 컴포넌트 안에서 state 를 추가하여 사용합니다.
• 현재 상태를 나타내는 state 값과 이 상태를 변경하는 setState 값을 한 쌍으로 제공합니다.
• state 는 초기 값을 설정할 수 있으며, 초기값을 첫 렌더링 때 한 번 사용됩니다.
• state 는 객체일 필요 없이 문자열, 숫자, boolean, 배열, null, 객체 등의 여러가지 다양한 값을 넣을 수 있습니다.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Example = () => {
	const [count, setCount] = useState(0);
	
	return (
		<View>
			<Text>{count}</Text>
			<Button title='증가' onPress={ () => setCount(count + 1) } />
		</View>
	)
}

useEffect

기존 클래스형 컴포넌트에서 사용했던 componentDidMount, componentDidUpdate, componentWillUnmount 를 하나의 API 로 통합한 것입니다.

• 기본적으로 useEffect(function, deps) 의 형태를 사용합니다.
• function 에는 실행 시킬 함수를 넣고, deps 에는 의존성 배열을 담습니다.
• 의존성 배열에 어떤 것이 담기느냐에 따라 부수적인 효과 함수가 실행됩니다.
• 가장 먼저 의존성 배열 없이 useEffect 를 실행시키게 되면 페이지가 렌더링 될 때마다 데이터를 불러 옵니다.

import React from 'react';

React.useEffect(() => {
	dispatch(getActions.getFundingAC(page));
});

• 두 번째로 의존성 배열에 빈배열을 담아주게 될 경우, 첫 렌더링 시에만 함수를 실행합니다.

import React from 'react';

React.useEffect(() => {
	dispatch(getActions.getFundingAC(page));
}, []);

• 마지막으로 의존성 배열에 state 값이나 props 로 상속받은 데이터 값 등을 담아주게 되면, 해당값이 변할 때마다 함수를 실행합니다.

import React from 'react';

const [page, setPage] = React.useState(1);

React.useEffect(() => {
	dispatch(getActions.getFundingAC(page));
}, [page]);

• useEffect 에서는 언마운트시에 cleanup 함수를 적용시킬 수 있습니다.

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

useEffect(() => {
	dispatch(getActions.getFundingDetailAC(fundId);
	return () => {
		dispatch(getActions.clena());
	}
}, [])

여기까지 간단하게 알아본 React Hook 이었습니다! 어떠신가요 이제 React Hook 을 사용할 수 있을 것 같나요?

물론 더 깊게 사용하기 위해서는 이것보다 더 많은 지식이 필요하겠지만 일단 이정도만 알아두자구요!
요즘에는 좌표와 싸우고 있습니다!! ㅋㅋㅋ 얼른 좌표와의 싸움에서 승리해서 돌아와서 그 경험도 한 번 공유해보도록 하겠습니다!
그럼 다음에 또 보아요!

모두들 안녕-쟈네-👋