개발새발 로그

📖들어가며..오늘은 오랜만에 리액트에서 자주 사용하는 패턴에 대해서 공부해보려고 한다.짧은 내용들을 끊어서 포스팅하고 있는 만큼 빨리 학습해야겠다고 생각이 든다. 👨‍💻 Disabled prop PatternDisabled prop Pattern이란 무엇일까?disabled prop 패턴은 버튼, 링크, 양식 필드와 같은 대화형 요소를 사용할 수 없거나 적용할 수 없을 때 비활성화하는 방법을 제공하여 접근 가능한 사용자 인터페이스를 만들 수 있도록 하는 React에서 사용되는 디자인 패턴입니다.이 패턴은 컴포넌트의 대화형 요소에 disabled 프로퍼티를 추가하는 것으로, true로 설정하면 요소를 비활성화하고 사용자 입력을 받지 못하도록 합니다. 이는 불완전한 양식이나 불충분한 사용자 권한 등 특..

📖들어가며...아코디언 기능을 만들어보고나서 이제는 TabMenu 기능을 만들어보려고 한다.사실 TabMenu기능은 아코디언 기능과 매우 유사하다.열고 닫을 때 처리를 해야하고, 현재 보여줘야할 요소를 상태로 관리하면 된다. 그럼 저번 아코디언 기능을 만들 때와 같이 다양한 방식으로 TabMenu를 구현해보자.  🤔TabMenu를 만든다고 한다면..처음에 TabMenu 기능을 만든다고 한다면 아래와 같이 만들 수 있다.const TabMenu1 = () => { //현재 선택한 탭 요소 const [currentId, setCurrentId] = useState(data[0].id) //탭 요소 클릭 이벤트 const toggleItem = (id: string) => () => { se..