리액트 훅 useEffect와 useRef

useEffect와 useRef는 리액트에서 자주 사용되는 훅으로, 각각 컴포넌트의 생명 주기를 관리하고, DOM 요소나 변수의 참조를 유지하는 데 도움을 줍니다. 

1. useEffect

useEffect는 리액트 함수형 컴포넌트에서 "사이드 이펙트(side effects)"를 처리할 수 있도록 도와주는 훅입니다. 사이드 이펙트란 API 호출, 데이터 가져오기, 수동으로 DOM을 조작하는 작업 등을 의미합니다.

기본 문법:

useEffect(() => {
    // 여기에 실행할 코드 작성
    
}, [dependencyArray]);

useEffect의 매개변수 설명

• 첫 번째 매개변수: 콜백 함수로, useEffect가 호출될 때 실행되는 함수입니다.
• 두 번째 매개변수: 의존성 배열(dependencyArray)로, 이 배열에 포함된 값이 변경될 때마다 useEffect의 콜백 함수가 다시 실행됩니다.

dependencyArray 예제

• [] 빈 배열: 컴포넌트가 처음 마운트될 때만 실행됩니다. 마운트 시 한 번만 실행되므로 컴포넌트 생명 주기의 componentDidMount와 유사한 역할을 합니다.
• [value]: 배열에 특정 변수를 넣으면, 그 변수가 변경될 때마다 useEffect가 실행됩니다.
• 의존성 배열을 생략하면: 컴포넌트가 렌더링될 때마다 useEffect가 실행됩니다.

예제: API 호출

import React, { useEffect, useState } from "react";

function DataFetcher() {
    const [data, setData] = useState(null);

    useEffect(() => {
        // 컴포넌트가 처음 마운트될 때 API 호출
        fetch("https://api.example.com/data")
            .then(response => response.json())
            .then(data => setData(data));
    }, []); // 빈 배열이므로 처음 마운트될 때 한 번만 실행

    return (
        <div>
            {data ? <p>{data}</p> : <p>Loading...</p>}
        </div>
    );
}

2. useRef

useRef는 리액트 컴포넌트에서 DOM 요소나 변수를 참조할 수 있게 해주는 훅입니다. 예를 들어, 특정 DOM 요소에 접근하거나, 렌더링 간에 값이 유지되길 원하는 경우 사용됩니다.

기본 문법:

const refContainer = useRef(initialValue);

• initialValue: 초기값을 설정할 수 있으며, null로 설정하는 경우가 많습니다.
• useRef로 생성된 객체는 .current라는 프로퍼티에 값이 저장됩니다.

주요 사용 예시

• DOM 요소 참조: 특정 DOM 요소에 접근할 때 useRef를 사용합니다.
• 값의 유지: 렌더링 간에 값이 유지되길 원할 때 사용합니다. 예를 들어, 상태로 관리하기 싫은 변수 (상태로 관리하면 렌더링이 발생하므로).

예제: DOM 요소에 포커스 설정

import React, { useRef, useEffect } from "react";

function FocusInput() {
    const inputRef = useRef(null);

    useEffect(() => {
        // 컴포넌트가 마운트될 때 input에 포커스 설정
        inputRef.current.focus();
    }, []); // 빈 배열이므로 처음 마운트될 때 한 번만 실행

    return <input ref={inputRef} placeholder="자동 포커스" />;
}

추가 예제: useEffect와 useRef를 함께 사용하기

아래는 useEffect와 useRef를 함께 사용하여 컴포넌트가 업데이트될 때마다 특정 DOM 요소에 포커스를 맞추는 예제입니다.

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

function UpdateFocus() {
    const [count, setCount] = useState(0);
    const buttonRef = useRef(null);

    useEffect(() => {
        // count가 변경될 때마다 버튼에 포커스를 설정
        buttonRef.current.focus();
    }, [count]); // count가 변경될 때마다 useEffect가 실행됨

    return (
        <div>
            <p>Count: {count}</p>
            <button ref={buttonRef} onClick={() => setCount(count + 1)}>
                Increase
            </button>
        </div>
    );
}

요약

• useEffect: 컴포넌트 생명 주기를 관리합니다.
  • 빈 배열 []: 마운트 시 한 번만 실행.
  • 의존성 배열 [value]: 배열의 값이 변경될 때마다 실행.
• useRef: DOM 요소나 변수를 참조합니다.
  • .current로 참조하며, 값이 변경되어도 재렌더링되지 않습니다.

이 두 가지 훅을 활용하면, 함수형 컴포넌트에서도 클래스형 컴포넌트의 생명 주기 메서드처럼 다양한 로직을 손쉽게 구현할 수 있습니다.

---

'포커스를 설정한다'는 것의 의미란?

버튼에 포커스를 설정한다는 것은 해당 버튼이 화면에서 강조 표시되는 상태가 되는 것을 의미합니다. 예를 들어, 폼에서 Tab 키를 누르면 입력 필드나 버튼이 순서대로 포커스를 받게 되며, 포커스가 된 요소는 스타일이 변경되어 나타나거나, Enter 키를 눌러 버튼을 활성화할 수 있게 됩니다.

포커스를 설정하면 사용자는 키보드로 해당 요소에 접근하거나 액션을 실행할 수 있습니다. 웹 접근성을 고려할 때도 중요한 개념이며, focus() 메서드나 useRef를 통해 특정 요소에 포커스를 강제로 설정할 수 있습니다.

예시: 버튼에 포커스를 설정하는 상황

1. 자동 포커스: 페이지가 로드될 때 특정 버튼에 포커스를 자동으로 주어 사용자에게 명확하게 어떤 액션을 취할 수 있는지 안내하는 경우.
2. 상태 변경 시 포커스 이동: 버튼을 클릭하거나 특정 조건이 충족될 때 해당 버튼으로 포커스를 이동하여 사용자가 바로 그 버튼을 인식하고 조작할 수 있도록 하는 경우.

버튼에 포커스 설정 예시

아래 코드는 컴포넌트가 처음 로드되었을 때, 버튼에 포커스를 자동으로 설정하는 예제입니다.

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

function FocusButton() {
    const buttonRef = useRef(null);

    useEffect(() => {
        // 버튼에 포커스 설정
        if (buttonRef.current) {
            buttonRef.current.focus();
        }
    }, []);

    return (
        <button ref={buttonRef}>
            Click Me
        </button>
    );
}

export default FocusButton;

예시 설명

위 코드에서 useRef로 생성된 buttonRef를 button에 연결(ref={buttonRef})하고, useEffect에서 buttonRef.current.focus()를 호출하여 컴포넌트가 마운트되면 버튼이 자동으로 포커스를 받도록 설정했습니다. 사용자가 페이지에 들어오면 Click Me 버튼이 포커스를 받게 되어 Enter 키를 눌러 바로 버튼을 클릭할 수 있습니다.

포커스 설정 효과

• 키보드만 사용하는 사용자에게 접근성을 제공.
• 사용자가 페이지에 들어올 때 주요 액션을 강조.
• 스타일이 적용되어 포커스된 요소가 시각적으로도 강조됨.