React.forwardRef()는 React의 고급 기능 중 하나로, 컴포넌트들 사이에서 ref를 명확하게 전달하기 위해 사용됩니다. 이 기능을 사용하여 테마(Theme) 기능을 구현하는 방법을 알아보겠습니다.

1. 테마 컴포넌트 생성

먼저, 테마를 정의하는 컴포넌트를 생성합니다. 이 컴포넌트는 테마와 관련된 스타일이나 변수들을 포함하게 됩니다.

import React from 'react';

const ThemeContext = React.createContext();

export function ThemeProvider({ theme, children }) {
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
}

위의 코드에서는 ThemeProvider라는 컴포넌트를 만들었습니다. 이 컴포넌트는 ThemeContext.Provider를 사용하여 자식 컴포넌트들에게 테마 정보를 제공합니다.

2. 테마 사용 컴포넌트 생성

다음으로, 테마 정보를 사용할 컴포넌트를 생성합니다. 이 컴포넌트는 ThemeProvider에서 제공된 테마 정보를 활용하여 UI를 렌더링합니다.

import React, { useContext } from 'react';

export function ThemedButton(props, ref) {
  const theme = useContext(ThemeContext);

  return (
    <button ref={ref} style={theme.button}>{props.children}</button>
  );
}

export default React.forwardRef(ThemedButton);

위의 코드에서는 ThemedButton이라는 컴포넌트를 만들었습니다. 이 컴포넌트는 React.forwardRef()를 사용하여 ref를 전달할 수 있도록 합니다. 그리고 useContext()를 사용하여 ThemeContext로부터 테마 정보를 가져와 버튼의 스타일을 적용합니다.

3. 테마 정보 전달

이제 테마 정보를 전달하는 부모 컴포넌트에서 ThemeProvider를 사용하여 테마 정보를 제공합니다.

import React from 'react';
import ThemedButton from './ThemedButton';

const theme = {
  button: {
    backgroundColor: 'blue',
    color: 'white',
  },
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ThemedButton>Click me</ThemedButton>
    </ThemeProvider>
  );
}

export default App;

위의 코드에서는 ThemeProvider를 사용하여 theme 객체를 테마 정보로 전달했습니다. ThemedButton은 ThemeProvider로부터 제공되는 테마 정보를 사용하여 렌더링됩니다.

결론

React.forwardRef()를 사용하여 컴포넌트의 테마 기능을 구현할 수 있습니다. 위의 예제를 참고하여 테마 기능을 적용하고, 필요에 따라 테마를 변경하거나 다른 컴포넌트에서도 동일한 테마 정보를 사용할 수 있도록 활용해 보세요.

#React #테마 #컴포넌트