인프런 커뮤니티 질문&답변
작성한 질문수
section8 93강 [해설] 복합 상태 버튼 그룹 스타일링 및 관리에 관련 궁금증
작성
·
20
0
해설 강의를 보다가 궁금한 점이 생겨 글 남겨봅니다.
<button
key={btn.id}
className={cx("button", {
active: activeStates[btn.id],
disabled: btn.isDisabled,
highlight: btn.id === 2,
})}
onClick={() => handleToggle(btn.id, btn.isDisabled)}
// disabled={btn.isDisabled} <- 따로 안쓰신 특별한 이유가 있는걸까?
>
{btn.icon} {btn.label}
</button>
// 토글 함수
const handleToggle = (id: number, isDisabled: boolean) => {
if (isDisabled) return;
setActiveStates((active) => ({
...active,
[id]: !active[id],
}));
};
disabled처리를 해도 스타일과 상태값이 변경되는 문제로 토글함수에 값을 전달해서 isDisabled가 true이면 return되게 작성하셨는데 button에 disabled 속성을 사용하지 않으시고 따로 isDisabled를 전달해 매개변수로 받아 처리하신 이유가 있나요?
답변 2
0
안녕하세요!
해설 영상에서는 문제에서 제시한 조건에 맞추어 코드를 작성하다 보니 그렇게 구현된 것입니다.
문제에서 isDisabled 속성이 true일 경우 disabled 클래스를 추가하라고 되어 있었기 때문에 우선 해당 조건만 반영했습니다.
영상에서는 disabled 속성을 직접 추가하지는 않았지만, 질문해주신 것처럼 disabled 속성을 함께 적용해주셔도 아주 좋은 방법입니다. 다만 disabled 속성은 브라우저 개발자 도구에서 강제로 제거할 수도 있기 때문에, 궁극적으로는 함수 내부에서 return으로 제어하는 코드가 반드시 필요합니다.
참고하셔서 적용해보시면 좋겠습니다!
0
안녕하세요, 인프런 AI 인턴입니다. 5647kr님.
<button> 태그에는 실제로 disabled 속성을 사용할 수 있으며, 이 속성을 통해 버튼의 비활성화를 구현할 수 있습니다. 그러나 강의에서 disabled 속성을 사용하지 않고 isDisabled를 매개변수로 전달하여 handleToggle 함수 내에서 리턴하도록 설정한 이유는, 사용자 정의 상태 관리 및 스타일링과 관련이 있을 수 있습니다.
왜 disabled 속성을 사용하지 않았을까요?
스타일링 제어:
disabled속성을 사용할 경우, 기본적으로 브라우저에서 제공하는 스타일이 적용됩니다. 이를 통해 각 브라우저별로 다르게 보일 수 있어, 일관된 사용자 경험을 위해 개발자가 직접 활성화/비활성화 스타일을 조정하고자 할 때가 있습니다.추가 로직 구현: 단순히 버튼의 클릭 가능 여부 외에도, 추가적인 로직을 구현해야 하는 경우가 있습니다. 예를 들어, 비활성 상태에서도 버튼이 다른 동작을 수행하거나 특정 이벤트를 로그할 필요가 있을 때입니다.
상태 관리 일관성: button의
disabled속성을 사용하면 해당 속성만 기준으로 하여 뷰가 갱신됩니다. 반면, 비활성화 상태를 자체적으로 관리함으로써 더 복잡한 상태 로직이나 동작을 일괄 관리할 수 있습니다.
이와 관련하여 도움이 될 수 있는 추가 질문 링크입니다:
이러한 방식들이 프로젝트에서 요구되는 UX와 로직에 따라 다양하게 적용될 수 있음을 이해하시면 좋겠습니다. 제가 제공한 링크들이 여러분의 학습에 도움이 되길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.