Hook (2)

학습 목표

이 영상을 통해 React의 상태 관리 심화 기법인 '상태 끌어올리기(Lifting State Up)'와 useRef 훅의 활용법을 이해하고 실제 코드에 적용할 수 있습니다.

핵심 개념

1. 상태 끌어올리기 (Lifting State Up)

• 개념: 여러 자식 컴포넌트에서 공유되는 상태를 공통된 부모 컴포넌트로 옮겨 관리하는 기법입니다.
• 동작 방식: 상태를 부모 컴포넌트에서 관리하고, 상태 변경 함수와 함께 props로 자식 컴포넌트에 전달합니다.
• 장점: 데이터의 일관성을 유지하고, 상태 변경 로직을 중앙에서 관리하여 코드의 복잡성을 줄입니다.
• 예시: 로그인 상태 관리, 사용자 입력 값 관리 등

// Parent Component
function Parent() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => setIsLoggedIn(true);
  const handleLogout = () => setIsLoggedIn(false);

  return (
    <ChildComponent 
      isLoggedIn={isLoggedIn}
      onLogin={handleLogin}
      onLogout={handleLogout}
    />
  );
}

// Child Component
function ChildComponent({ isLoggedIn, onLogin, onLogout }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome!</p> : <p>Please log in.</p>}
      <button onClick={isLoggedIn ? onLogout : onLogin}>
        {isLoggedIn ? 'Logout' : 'Login'}
      </button>
    </div>
  );
}

2. useRef 훅

• 개념: 컴포넌트의 생명주기 동안 변경되지 않는 값을 저장하거나, 실제 DOM 요소에 직접 접근할 때 사용합니다.
• 동작 방식: useRef는 .current 속성을 가진 객체를 반환하며, 이 객체의 값을 변경해도 컴포넌트가 리렌더링되지 않습니다.
• 주요 용도:
  • DOM 요소 참조 (예: input 포커스, 스크롤 위치 제어)
  • 렌더링 간에 값을 유지해야 할 때 (상태 변경 시 리렌더링을 원치 않을 때)
• useState와의 차이점: useState는 값 변경 시 리렌더링을 유발하지만, useRef는 리렌더링을 유발하지 않습니다.

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

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onFocusClick = () => {
    // DOM 요소에 직접 접근하여 포커스를 설정합니다.
    inputEl.current.focus(); 
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onFocusClick}>Focus the input</button>
    </>
  );
}

공부 방향성

• 시청 전: React의 기본적인 상태 관리 (useState)에 대한 이해가 필요합니다.
• 시청 중: '상태 끌어올리기'의 필요성과 구현 방법을 집중적으로 학습하고, useRef의 동작 방식과 useState와의 차이점을 명확히 구분하세요. 코드 예제를 따라 치며 직접 구현해 보는 것이 좋습니다.
• 시청 후: 실제 프로젝트에서 발생하는 다양한 상태 관리 문제를 '상태 끌어올리기'와 useRef를 활용하여 해결하는 연습을 해보세요. 특히 DOM 조작이 필요한 경우 useRef를 적극적으로 활용하는 경험을 쌓는 것이 중요합니다. 커스텀 훅을 만들어 재사용성을 높이는 방향으로 확장해 나갈 수 있습니다.