제목: React Hook에서 함수형 컴포넌트의 이름에 접근하는 방법
소개
React hooks를 사용할 때, 커스텀 훅 내에서 함수형 컴포넌트의 이름에 접근하는 것은 도전적일 수 있습니다. 하지만 이를 가능하게 하는 여러 기법이 있습니다. 이 블로그 포스트에서는 useLogging이라는 커스텀 React 훅을 사용하여 컴포넌트의 이름을 기반으로 로그 메시지를 맥락화하는 다양한 접근 방법을 살펴보겠습니다.
가장 간단한 방법
컴포넌트의 이름에 접근하는 가장 간단한 방법은 useLogger 함수에 인자로 전달하는 것입니다:
const useLogger = (name) => {
return logManager.getLogger(name);
};
const Login = () => {
const log = useLogger('Login');
// ...
};displayName 또는 name 사용
다른 방법으로 displayName 또는 name 속성을 사용하는 방법이 있습니다. 다만, name 속성은 프로덕션 빌드에서 미니파이될 수 있다는 점을 유의해야 합니다. 이를 처리하기 위해 displayName 속성을 명시적으로 설정할 수 있습니다:
const useLogger = (component) => {
const name = useLogger(component.displayName || component.name);
return logManager.getLogger(name);
};
const Login = () => {
const log = useLogger(Login);
// ...
};
Login.displayName = 'Login';ts-nameof 사용
이름이 자동으로 바뀌어도 이름이 유지되는 것을 보장하기 위해 ts-nameof를 사용할 수 있습니다. 이는 ts-nameof를 설치하고 빌드 파이프라인에서 구성하는 것을 포함합니다. 다음은 예시입니다:
const useLogger = (name) => {
return logManager.getLogger(name);
};
const Login = () => {
const log = useLogger(nameof(Login));
// ...
};로거 팩토리 생성
로거가 컴포넌트별이 아닌 모듈별로 사용되는 경우 로거 팩토리 함수를 생성할 수 있습니다. 이 방식은 모듈 상단에서 로거를 한 번만 초기화할 수 있도록 합니다:
const makeUseLogger = (name) => () => {
return logManager.getLogger(name);
};
const useLogger = makeUseLogger('모듈 이름');
const Login = () => {
const log = useLogger();
// ...
};webpack에서 __filename 사용
webpack을 구성함으로써 __filename 기법을 활용할 수 있습니다. 이 방식은 프로젝트 디렉토리 구조를 노출시킬 수 있지만 유용할 수 있습니다:
// webpack.config.js
module.exports = {
// ...
node: {
__filename: true
}
};
const log = logManager.getLogger(__filename);결론
이 블로그 포스트에서는 React 훅 내에서 함수형 컴포넌트의 이름에 접근하는 여러 기법을 살펴보았습니다. 이러한 접근 방법을 활용하여 컴포넌트의 이름을 기반으로 로그 메시지를 맥락화함으로써 디버깅 및 문제 해결 과정을 효율적으로 만들 수 있습니다.
특정 요구사항과 개발 환경에 가장 적합한 기법을 선택하는 것을 기억해주세요. 인자로 이름을 전달하거나 displayName, name, ts-nameof 또는 __filename 기법을 사용하는 것 중에서 선택하여 useLogging 함수가 수동 개입에 의존하지 않고도 컴포넌트 리팩토링을 견딜 수 있게 해줄 것입니다.
