개발새발 로그

📖들어가며..24년 1월 18일 블로그 포스팅을 시작으로 회원가입 기능에 대해서 계속 리팩토링을 고민해왔었다.처음에는 각각의 Form 데이터들을 하나의 컴포넌트로 만들어서 재사용성이 낮은 기능으로 개발했었다.이후 팀원들의 코드리뷰와 피드백으로 useForm이라는 커스텀 훅을 만들었고, 중복되는 로직들을 개선했다.  24년 3월 29일 블로그 포스팅에서는 useForm 훅 리팩토링을 시도했었다.useForm이라는 커스텀 훅 개발에 자신감을 느끼고, 개발과정을 기록했었다.기록하면서 "좋지않은 부분이 있는 것 같은데..?"라는 생각이 들었었다.그래서 추가로 리팩토링을 시도하게 됐다.그래서 해당 문제를 의존성을 알리는 객체 dependencies를 받을 수 있게끔해서 해결했다.간단하게 말하면"비밀번호확인은 비..

📖들어가며..제어 컴포넌트와 비제어 컴포넌트는 리액트를 사용하면서 많이 들어봤을 것이다.나는 제어컴포넌트란 리액트의 상태로 관리되는 컴포넌트를 의미하는 것이고,비제어 컴포넌트는 그 반대의 의미라고 이해하고 있다. 제어, 비제어 컴포넌트 패턴을 보면서 그 내용을 더 깊게 이해해보려고 한다.  🤔제어 컴포넌트(Controlled Component)란?제어 컴포넌트는 React에 의해 값이 제어되는 폼 엘리먼트입니다.컴포넌트의 값은 항상 프로퍼티를 통해 명시적으로 설정되고 콜백을 통해 업데이트됩니다. 즉, 컴포넌트의 상태는 항상 입력 데이터와 동기화되므로 React가 컴포넌트의 동작을 제어할 수 있고 개발자가 사용자 입력을 쉽게 처리할 수 있습니다.🤔제어컴포넌트를 사용할 경우는?폼 입력값을 실시간으로 검..

📖들어가며..오늘은 오랜만에 리액트에서 자주 사용하는 패턴에 대해서 공부해보려고 한다.짧은 내용들을 끊어서 포스팅하고 있는 만큼 빨리 학습해야겠다고 생각이 든다. 👨‍💻 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..