ReactNative Hooks (useState, useEffect, useRef)

황씨·2024년 10월 10일

리액트 네이티브에서 가장 많이 쓰이는 훅들을 좀 정리하려고 한다.
잘알지는 못하지만 아는 선에서만 조금 정리를 해보자

1. useState(상태관리)

useState는 컴포넌트의 상태를 관리하는데 사용된다. 상태가 변경되면 다시 렌더링된다.

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

function Counter() {
  const [count, setCount] = useState(0); // count라는 상태와, setCount라는 상태를 변경하는 함수가 생김

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
}

위에 코드로 정리를 하자면
count : 컴포넌트에서 관리하고자 하는 상태 값을 나타낸다.
setCount : 상태를 변경할 수 있는 함수이다. 이 함수가 호출되면 상태가 변경되고 컴포넌트가 다시 렌더링된다.
useState(0) : 0은 상태의 초기값이다. 컴포넌트가 처음 렌더링될 때 이값으로 상태가 설정된다.

처음화면이 렌더링되면 0으로 시작해서, 버튼을 클릭해 setCount 함수가 작동하면
상태가 변경되어 재렌더링이 된다.

useState는 초기 상태값으로 기본 데이터타입 뿐만 아니라 함수나 객체도 사용할 수 있다.

기본값 예시

const [count, setCount] = useState(0); // 숫자형 초기 값
const [name, setName] = useState(''); // 문자열 초기 값
const [isVisible, setIsVisible] = useState(false); // 불리언 초기 값

객체나 배열을 초기 값으로 설정한 예시

const [user, setUser] = useState({ name: 'John', age: 25 });
const [items, setItems] = useState([1, 2, 3]);

상태변경이 리렌더링을 유발하는 이유

useState로 상태가 변경되면 리액트는 그 상태가 변경되었음을 감지하고, 해당 컴포넌트만 다시 렌더링한다.
가상 DOM 매커니즘에 따라, 변경된 부분만 다시 그려지기 때문에 성능이 최적화된다.

useState 요약

useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 기본 훅이다.

setState 함수는 상태를 변경하고 컴포넌트를 리렌더링 하는 역할을 한다.

복잡한 객체나 배열을 관리할 때는 불변성을 유지하면서 상태를 업데이트해야한다.

상태 업데이트는 비동기적으로 처리된다.

2. useEffect(부수효과)

useEffect는 부수효과(side effect)를 처리하기 위해 사용되는 훅이다.
부수효과란 컴포넌트가 리렌더링될 때마다 발생하는 비동기 작업이나 DOM 조작, 외부 데이터를 가져오는 등의 작업을 의미한다.

컴포넌트의 라이프사이클 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount를 대체하는 역할을 한다.

useEffect(() => {
	//부수효과 코드
},[의존성배열]);

첫 번째 인자로 전달된 함수가 부수효과를 수행한다.
두 번째 인자로 의존성배열을 전달하면, 이 배열에 있는 값이 변경될 때만 부수효과가 실행한다.
(의존성 배열을 사용하지 않으면 컴포넌트가 렌더링될때마다 useEffect 실행됨, 하단에 예시 있음)

부수효과 처리 타이밍

컴포넌트가 마운트될 때(처음 렌더링될 때)
컴포넌트가 업데이트될 때(상태나 props가 변경될 때)
컴포넌트가 언마운트될 때(화면에서 사라질 때)

의존성 배열 유무에 대한 예시

1) 의존성배열이 없는 경우

useEffect(() => {
  console.log('렌더링될 때마다 실행');
});

의존성 배열이 없는 경우, 컴포넌트가 렌더링될 때마다 useEffect가 실행됨, 상태나 props가 변경될 때마다 이 함수가 호출된다.

2) 의존성 배열이 빈 경우

useEffect(() => {
  console.log('마운트 시 한 번만 실행');
}, []); // 빈 배열

의존성 배열이 빈 배열이면, 컴포넌트가 마운트될 때 한번만 실행된다.

3) 의존성 배열에 값이 있는 경우

useEffect(() => {
  console.log('name이 변경될 때만 실행');
}, [name]); // name 상태가 변경될 때만 실행

의존성 배열에 특정 값(name)이 있으면, 해당 값이 변경될 때만 부수효과가 실행된다.
이를 통해 필요할때만 부수효과 실행가능

useEffect 요약

useEffect는 부수효과를 처리하는 훅으로, 컴포넌트가 렌더링되거나 업데이트 될 때 동작한다.

의존성 배열을 사용하여 특정 값이 변경될 때만 실행할 수 있도록 제어 가능

API 호출 및 이벤트리스너 관리 등 작업에 많이 사용됨

3. useRef(참조)

이 또한 리액트에서 많이 쓰이는 훅 중 하나로, DOM 요소에 직접 접근하거나, 리렌더링과 관계없이 값을 유지하고 싶을때 사용된다.
이 훅은 참조(Reference)를 생성하며, 해당 참조값은 컴포넌트가 리렌더링되더라도 변하지 않고 유지하게 된다. 그렇기 때문에 DOM 조작이나 특정 값을 저장해두고 싶을 때 유용하다.

특징

DOM 요소 접근 가능
리렌더링을 유발하지 않으면서 값 저장가능
리렌더링 하더라도 변하지 않는 참조 값 유지 가능
초기 값은 null로 설정할 수 있으며, DOM 요소나 변수를 참조할 때 값을 설정한다.

DOM 요소 접근

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputRef = useRef(null); // 초기값으로 null 설정

  const handleButtonClick = () => {
    // useRef를 사용해 input DOM 요소에 직접 접근하여 포커스 설정
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleButtonClick}>포커스 주기</button>
    </div>
  );
}

useRef(null)로 참조를 생성하고, <input>의 ref속성에 inputRef를 할당한다.
inputRef.current는 <input>요소를 가리키게 되며, 이를 통해 focus() 메서드를 호출하여 해당 <input>에 포커스를 줄 수 있다.
useRef로 DOM 을 참조해도 컴포넌트는 다시 렌더링 되지 않는다.

리렌더링과 관계없는 값 저장

useRef는 리렌더링과 관계없이 값을 유지할 수 있다. 컴포넌트가 렌더링 될 때마다 값이 변하지 않게 하려면 useRef를 사용할 수 있다. useRef의 current 값은 컴포넌트가 리렌더링 되어도 그대로 유지되며, 값을 변경해도 리렌더링을 유발하지 않는다.

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

function Timer() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0); // 초기값 0 설정

  const incrementCount = () => {
    countRef.current += 1; // current 값이 변경되어도 리렌더링되지 않음
    console.log("Ref count:", countRef.current); // 콘솔에 current 값 출력
  };

  const updateCount = () => {
    setCount(countRef.current); // 상태로 값을 업데이트 -> 리렌더링 발생
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Ref 값 증가</button>
      <button onClick={updateCount}>상태 업데이트</button>
    </div>
  );
}