Snackbar 컴포넌트 디자인; callback ref 활용법
· 2 min read
최근 Snackbar 컴포넌트를 만들면서 callback ref를 사용하게 되었습니다. callback ref는 함수를 ref로 전달하는 방식입니다. 이 글에서는 callback ref를 사용하게 된 이유와 사용 사례를 컴포넌트 개발 사례를 통해 소개하고자 합니다.
Quest! Snackbar 컴포넌트 제작하기
Snackbar 컴포넌트는 사용자에게 메시지를 보여주는 컴포넌트입니다. 사용자가 어떤 작업을 했을 때, 성공했는지 실패했는지 등을 알려주는 데 사용합니다.
말줄임표 처리 문제
제가 맞닥뜨린 문제는 Snackbar 컴포넌트의 내부 텍스트의 말줄임표 처리였습니다. 단순히 Snackbar 컴포넌트의 내부 메세지 텍스트에 max width값을 설정해 주어 ellipsis로 말 줄임 처리하면 해결되는 문제가 아니었기 때문입니다. Snackbar 컴포넌트 내부에 액션버튼이 있을 때, 액션 버튼의 길이에 따라 내부 메세지 텍스트의 max width값이 동적으로 변경되어야 했습니다.
const Snackbar = ({ message, action }) => {
const classes = useStyles({
root: {
width: "fit-content",
maxWidth: "300px",
},
message: {
width: "fit-content",
// maxWidth: 'calc(100% - action 버튼의 크기에 따라 동적으로 변경)',
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
},
action: {
maxWidth: "100px",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
},
});
return (
<div className={classes.root}>
<div className={classes.message}>{message}</div>
<button className={classes.action}>{action}</button>
</div>
);
};
