React.forwardRef()를 사용하여 컴포넌트의 로그인(Login) 기능 구현 방법에 대해 알려주세요.

10 Nov 2023

reactjs

React는 컴포넌트 간에 데이터를 전달하고 상태를 관리하기 위한 매우 효과적인 방법을 제공합니다. React.forwardRef() 함수는 이러한 기능 중 하나이며, 자식 컴포넌트에 대한 참조를 부모 컴포넌트로 전달하고자 할 때 사용됩니다. 이번 예시에서는 로그인(Login) 기능을 가진 컴포넌트에 Forwarding Refs를 사용하는 방법에 대해 알아보겠습니다.

Forwarding Refs란 무엇인가요?

Forwarding Refs는 React 컴포넌트 계층 구조에서 부모 컴포넌트로부터 자식 컴포넌트의 참조를 전달하는 기능입니다. 이를 통해 부모 컴포넌트는 자식 컴포넌트의 메서드를 호출하거나 속성에 접근할 수 있게 됩니다.

로그인(Login) 컴포넌트 구현 예시

다음은 로그인(Login) 컴포넌트를 구현하는 예시입니다. 로그인 컴포넌트는 사용자 이름과 비밀번호를 입력받고 로그인 버튼을 제공하는 간단한 기능을 가지고 있습니다.

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

const Login = forwardRef((props, ref) => {
  const usernameRef = useRef(null);
  const passwordRef = useRef(null);

  const handleLogin = () => {
    const username = usernameRef.current.value;
    const password = passwordRef.current.value;

    // 로그인 처리 로직 작성

    console.log("Username:", username);
    console.log("Password:", password);
  };

  return (
    <div>
      <input type="text" ref={usernameRef} placeholder="Username" />
      <input type="password" ref={passwordRef} placeholder="Password" />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
});

export default Login;

위의 코드에서는 forwardRef 함수를 사용하여 부모 컴포넌트로부터 참조(ref)를 전달 받을 수 있도록 설정했습니다. useRef 훅을 사용하여 usernameRef와 passwordRef 변수를 생성하고, 인풋 필드에 대한 참조를 할당했습니다.

handleLogin 함수는 로그인 버튼이 클릭될 때 실행되며, 사용자 이름과 비밀번호를 가져와서 처리하는 간단한 예시입니다. 실제로 로그인 처리 로직을 작성해야 합니다.

부모 컴포넌트에서 로그인 컴포넌트에 참조(ref) 전달하기

이제 위에서 구현한 로그인 컴포넌트에 대한 참조를 부모 컴포넌트로 전달하는 방법에 대해 알아보겠습니다.

import React, { useRef } from "react";
import Login from "./Login";

const ParentComponent = () => {
  const loginRef = useRef(null);

  const handleLoginButtonClick = () => {
    // 로그인 컴포넌트 내부 메서드 호출 예시
    loginRef.current.handleLogin();
  };

  return (
    <div>
      <Login ref={loginRef} />
      <button onClick={handleLoginButtonClick}>Login</button>
    </div>
  );
};

export default ParentComponent;

부모 컴포넌트에서는 useRef 훅을 사용하여 loginRef 변수를 생성하고, 이를 Login 컴포넌트의 ref prop에 할당합니다. 부모 컴포넌트에서 handleLoginButtonClick 함수는 로그인 컴포넌트의 handleLogin 메서드를 호출할 수 있습니다.

위의 예시는 Forwarding Refs를 사용하여 로그인 컴포넌트와 부모 컴포넌트 간에 데이터를 전달하는 방법을 보여줍니다. 이를 응용하여 더 복잡한 상황에서도 데이터를 효율적으로 전달하고 관리할 수 있습니다.