React + Ts 프론트엔드 개발기(feat. 메이플스토리) - 03. 베이스 컴포넌트

 

import { memo, MouseEvent, ReactNode, useCallback } from 'react';
import { BaseComponentProps } from '../../type';

export interface ButtonProps extends BaseComponentProps {
	className?: string;
	children?: ReactNode;
	onClick?: (e: MouseEvent) => void;
}

export const Button = memo(function Button(props: ButtonProps) {
	const { className, children } = props;

	const onClick = useCallback(
		(e: MouseEvent) => {
			e.stopPropagation();
			props.onClick?.(e);
		},
		[props.onClick]
	);

	return (
		<button className={className} onClick={onClick}>
			{children}
		</button>
	);
});

 

베이스 컴포넌트

 - 버튼, 인풋과 같은 공통 컴포넌트를 설계 중, 해당 공통 컴포넌트에서 설정할 수 있는 모든 정보들을 prop으로 받아 공통 컴포넌트가 그 어떤 상황에도 대응할 수 있는 일종의 "만능 컴포넌트"가 되는 것을 경계하기 위해 도입한 개념입니다.

 - 공통 컴포넌트의 하위 개념으로, 공통 컴포넌트가 만능의 역할을 가지지 않고, 베이스 컴포넌트가 만능의 역할을 할 수 있게끔 하였습니다.

    - 공통 컴포넌트가 만능 컴포넌트가 되는 것을 경계한 이유: 사용하는 입장에서, 각 상황에 맞는 prop들을 매 사용시마다 모두 일일이 주입해줘야 하는 번거로움이 생산성을 저해할 수 있다고 느꼈기 때문

 

공통 컴포넌트

 - 아직 작성하지 않았으나, 디자인적 요소를 기준으로 구분할 예정입니다.

 - 가령, 검색을 위해 돋보기 모양의 이미지가 삽입된 "검색 버튼", 열린 모달창을 닫기 위한 "닫기 버튼" 등이 될 수 있을 것 같습니다.

 - 바로 위에 설명드린 버튼이 사실 역할로 구분된 것 처럼 보이나, 아직 시각적으로 구현된 요소가 전혀 없어 설명이 모호해 보이긴 하지만, 대강 묘사한 아래 버튼과 같이 디자인적으로 구분되어 있음을 이해하시면 될 것 같습니다

 

인터페이스

export interface ButtonProps extends BaseComponentProps {
	className?: string;
	children?: ReactNode;
	onClick?: (e: MouseEvent) => void;
}

 - 베이스 컴포넌트가 prop으로 받을 수 있는 Props를 정의

 - 베이스 컴포넌트는 만능의 역할을 할 수 있게끔 필요에 따라 추가적인 타입이 계속해서 정의될 예정

 - 필요하지 않은 prop의 경우, 사용하지 않기 위해 모든 prop을 optional로 구현

 - className과 같이 모든 컴포넌트에서 활용할 수 있는 prop은 BaseComponentProps로 옮길 예정

 - extends를 활용할 수 있는 interface가 가독성면에서 더 좋다고 판단해 type 대신 interface 활용

 

컴포넌트

export const Button = memo(function Button(props: ButtonProps) {
	const { className, children } = props;

	const onClick = useCallback(
		(e: MouseEvent) => {
			e.stopPropagation();
			props.onClick?.(e);
		},
		[props.onClick]
	);

	return (
		<button className={className} onClick={onClick}>
			{children}
		</button>
	);
});

 

 - 전달받은 prop을 활용해 렌더링

 - 클릭 이벤트의 경우, 이벤트 위임 패턴을 활용하지 않기로 결정해 stopPropagation을 기본적으로 사용

    - 말단의 컴포넌트까지 이벤트를 모두 prop으로 전달해줘야하는 번거로움이 있을 수 있으나, 디버깅 등의 상황에서 이벤트 위임 패턴을 활용하지 않는 편이 이벤트 발생을 추적하기 더 쉽다고 생각해 결정

 - 클릭시, 발생하는 이벤트 객체를 전달해 해당 정보를 활용할 수 있도록 함

- forwardRef를 통한 ref를 전달받지 않았으나, 추후 focus 유지 등 다뤄야 할 특별한 케이스가 존재한다면 적용 예정

    - 적용이 필요하다면, react 19에서 변경된 사항인 forwardRef를 사용하지 않고도 ref를 전달받을 수 있는 방법을 활용