개발새발 로그

✨DragDropContext 드래그 앤 드롭을 가능하게 허용할 부분을 감싸주는 태그 onDragEnd : 드래그를 끝낸 시점에 호출되는 함수 (필수 속성)onDragStart : 드래그가 시작할 때 호출onDragUpdate: 드래그가 시작할 때 & 요소 간의 순서가 바뀔 때 호출✨Droppable드롭이 가능한 부분을 감싸주는 태그 droppableId : 구분자 (필수 속성)children은 반드시 함수여야 함 (JSX 태그X) -> 따라서 함수로 JSX 태그를 리턴하는 형식을 자식에 넣어주어야 한다 Droppable이 내부 함수에 전달해주는 인자 : provided내부 JSX 태그에 ref={provided.innerRef} {...provided.droppableProps} 속성을 부여해줘야 한..

CRA란?CRA란 리액트 프로젝트를 쉽게 만들 수 있도록 모듈 혹은 설정을 포함하는 보일러 플레이트입니다.CRA를 통해 react를 설치하면 on build dependency를 가집니다.React 프로젝트를 구성할 때 필요한 Webpack, Babel의 연결에 관해서 신경쓰지 않아도 됩니다. Babel이란?Babel이란 자바스크립트 컴파일러입니다. React에서 사용하는 JSX 문법을 자바스크립트로 변환해주고,최신 문법의 JS를 낮은 버전의 JS로 변환해주는 역할도 합니다.또한 타입스크립트도 변환해줍니다. CRA대신 Webpack을 사용하는 이유개발해야하는 서비스의 규모가 커지거나 컴포넌트들의 양이 많아질수록 리액트 개발환경에 추가적인 설정을 해야하는 경우가 생깁니다.이 때 리액트의 구조나 Webpac..

📖들어가며..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..