[React Native/RN] Hooks이란? (useState, useEffect 사용법)

 

 

Hooks이란?

Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다.

Hook은 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공한다.

 

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않지만 class 없이 React를 사용할 수 있게 해준다.

 

지원 버전

React 16.8.0 이상

React Native 0.59 이상

 

 

 

State Hook (useState)

useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있다. useState는 class의 this.setState와 거의 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 차이점이 있다. 

 

예시 코드)

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

function Example() {
  const [value, setValue] = useState(0);

  return (
    <View>
      <Text>current value: {value}</Text>
      <TouchableOpacity onPress={() => setCount(count + 1)}>
        <Text>Click me</Text>
      </TouchableOpacity>
    </View>
  );
}

 

 

 

Effect Hook (useEffect)

useEffect는 함수 컴포넌트 내에서 side effects(React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들)를 수행할 수 있게 해준다.

React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 비슷한 기능이라고 생각하면 된다.

 

 

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`You clicked ${count} times`)
  });

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <TouchableOpacity onPress={() => setCount(count + 1)}>
        <Text>Click me</Text>
      </TouchableOpacity>
    </View>
  );
}

 

해당 코드를 실행 시 count의 값이 증가할 때마다 콘솔에 로그가 출력되는걸 확인할 수 있다.

 

• 마운트가 될 때만 실행시키는 방법

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

컴포넌트가 화면에 처음 렌더링이 될 때만 실행하고, 업데이트가 될 경우에는 실행되지 않길 원한다면 두번째 파라미터에 빈 배열을 추가하면 된다.

 

• 특정 값이 업데이트 될 때만 실행시키는 방법

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

function Example() {

  const [count, setCount] = useState(0);
  const [clickCount, setClickCount] = useState(0);

  useEffect(() => {
    console.log(`You clicked TouchableWithoutFeedback ${clickCount} times`);
  }, [clickCount]);
  
  useEffect(() => {
    console.log('마운트 될 때만 실행됩니다.');
  }, []);


  return (
    <View style={styles.welcomeContainer}>

        <Text>You clicked TouchableOpacity Component {count} times</Text>

        <TouchableOpacity 
          style={{marginVertical: 15}} 
          onPress={() => setCount(count + 1)}>
          <Text>Click TouchableOpacity</Text>
        </TouchableOpacity>

        <TouchableWithoutFeedback 
          onPress={() => setClickCount(clickCount + 1)}>
          <Text>Click TouchableWithoutFeedback</Text>
        </TouchableWithoutFeedback>
    </View>
  );
}

useEffect의 두번째 파라미터에 변경을 감지할 값을 넣어주면 된다.

예시 코드의 경우 TouchableWithoutFeedback 컴포넌트를 클릭했을 경우에만 콘솔에 로그가 출력되는 걸 확인할 수 있다.

 

Hook 사용 규칙

1. 최상위 레벨에서만 Hook을 호출해야 한다. (반복문, 조건문, 중첩된 함수 등에서 호출 불가)
2. React 함수 내에서 Hook을 호출한다.

 

 

 

참고)

https://ko.reactjs.org/docs/hooks-faq.html

Hook 자주 묻는 질문 – React