[250916] TIL

Today I Learned (2025-09-16)

React DevTools

• 브라우저 확장 프로그램
• Tab.displayName = 'Tab'
  • HOC(고차 컴포넌트)나 forwardRef/memo를 쓰면 이름이 깨지는데 설정 해주면 DevTools에 Tab으로 표시된다.
• 리렌더링 볼 수 있도록 수정

HOC (고차 함수 컴포넌트)

• React에서 재사용 가능한 로직을 추상화하는 패턴
• 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수를 뜻함

const withAuth = (WrappedComponent) => {
  return (props) => {
    if (!props.isLoggedIn) {
      return <div>로그인이 필요합니다</div>;
    }
    return <WrappedComponent {...props} />;
  };
};

const Profile = (props) => <div>{props.user.name}의 프로필</div>;
const ProtectedProfile = withAuth(Profile);

요즘은 커스텀훅으로 사용

// 인증 여부를 제공하는 훅
function useAuth() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    // 예: 토큰 체크, API 호출 등
    const token = localStorage.getItem("token");
    if (token) {
      setIsLoggedIn(true);
      setUser({ name: "수지" });
    }
  }, []);

  return { isLoggedIn, user };
}

// 컴포넌트에서 직접 사용
function Profile() {
  const { isLoggedIn, user } = useAuth();

  if (!isLoggedIn) {
    return <div>로그인이 필요합니다</div>;
  }

  return <div>{user.name}의 프로필</div>;
}


# forwordRef

- React 에서 ref를 자식 컴포넌트로 전달할 수 있게 해주는 고차 컴포넌트 (HOC)
- https://ko.react.dev/reference/react/forwardRef
- 향후 사용 중단 될 예정인 API 사용중
  -> React 19 이상부터는 필요하지 않는데 사용중, 바꿔야할듯

React 19부터는 더 이상 forwardRef이 필요하지 않습니다. 이제 ref를 Prop으로 직접 전달하면 됩니다.

forwardRef는 향후 릴리스에서 사용 중단Deprecated될 예정입니다. 자세한 내용은 여기에서 확인하세요.