clicktoedit.gif ClickToEdit 만들기 🛠 웹서비스를 만들 때 자주 사용하게 되는 ClickToEdit 만들어 보자!! 프로젝트 구조는 다음과 같습니다. ClickToEdit 폴더 안에 ClickToEdit 컴포넌트와 Myinput 컴포넌트를 만들고 ClickToEdit 컴포넌트를 App.js에 불러와서 사용 1. Component 구조잡기 . 2. Component 스타일링 . 구현 방법 . useState 훅을 이용하여 input의 상태를 관리하고, useRef 훅으로 input 창을 클릭한 상태에서만 값을 변경할 수 있게 하였습니다. 어려웠던 점 해결 방법 . input의 변경된 값을 저장하는 button이 따로 존재하지 않기 때문에 입력된 값을 변경하는 방법이 어려웠습니다. 해결 방법으로 input에 입력한 값을 newValue에 담은 뒤, handleBlur에 의해서 handleValueChange 함수가 실행되어 값이 바꿔 해결하였습니다. 자세한 실행…

tag.gif Tag 만들기 🛠 웹서비스를 만들때 자주 사용하게 되는 Tag를 만들어 보자!! 프로젝트 구조는 다음과 같습니다. Tag 컴포넌트를 App.js에 불러와서 사용 1. Component 구조잡기 . 2. Component 스타일링 . 구현 방법 . useState 훅을 이용하여 tags의 상태를 관리하고, initialTags 함수로 기본 tag 값을 세팅하였습니다. 공백이 입력이 되지 않게 해주기 위해 trim() 함수 사용하였고, 이미 입력되어 있는 태그인지 검사하여 이미 있는 태그라면 추가하지 않기 위해 includes() 함수 사용하여 확인하였습니다. Enter 키를 활용하여, 태그를추가할 수 있도록 구현하였으며, map 함수의 index를 전달받아 클릭된 인덱스 정보를 활용해서 삭제하였습니다. 어려웠던 점 해결 방법 . 배열의 첫 번째 요소에 대한 인덱스를 반환하는 findIndex 함수를 사용하여 index를 찾아 삭제해 주는 방식을 사용하였지만, 비효율적…

tab.gif Tab 만들기 🛠 웹서비스를 만들때 자주 사용하게 되는 Tab(네비게이션?)을 만들어 보자!! 프로젝트 구조는 다음과 같습니다. Tab 컴포넌트를 App.js에 불러와서 사용 1. Component 구조잡기 . 2. Component 스타일링 . 구현 방법 . li 엘리먼트를 map 함수로 menu의 숫자만큼 만들어 준 뒤, 인덱스를 두 번째 인자로 넣어서 onClick 핸들러 함수에 index를 전달했습니다. 그리고 인덱스를 전달받은 함수를 통해서 currentTab 상태를 해당 인덱스로 바꿔주며클릭 된 Tab의 className을 변경하고 클릭 된 메뉴의 CSS 값을 변경, 선택된 li이 엘리먼트를 시각화 시켜줄 수 있게 됩니다. 어려웠던 점 해결 방법 . 처음 구현할 시 menu를 map 함수로 생성한 것이 아니라 li를 원하는 menu 개수만큼 만들어 구현하였습니다. 코드의 길이가 길어지고 효율성이 떨어진다 판단하여 map 함수를 사용하여 menu를 원하는 …

toggle.gif Toggle 만들기 🛠 웹서비스를 만들때 자주 사용하게 되는 토글(스위치)을 만들어 보자!! 프로젝트 구조는 다음과 같습니다. Toggle 컴포넌트를 App.js에 불러와서 사용 1. Component 구조잡기 . 2. Component 스타일링 . 구현 방법 . useState 훅을 이용하여 boolean 상태 값을 핸들링하는 ToggleHandler 함수를 만들어 토글의 스위치를 켜거나 끄도록 하였습니다. 상태 값을 변수로 사용하면 토글의 스위치가 켜질때 자동으로 Dom이 재 렌더링 되는 것을 방지하기 위해 useState를 사용하여 구현하였습니다. 어려웠던 점 해결 방법 . 토글스위치가 켜질 때 뒷배경과 토글 버튼이 좌측에서 우측으로 이동되는 움직임을 만드는 게 어려웠습니다. linear-gradient를 사용하여 배경이 한쪽에서 부터 점점 채워지는 느낌으로 구현할 수 있었고, 토글 UI에서는 isToggleOn 상태를 활용해서 className을 변경해…

modal.gif Modal 만들기 🛠 웹서비스를 만들때 자주 사용하게 되는 모달(팝업)을 만들어 보자!! 프로젝트 구조는 다음과 같습니다. Modal 컴포넌트를 App.js에 불러와서 사용 1. Component 구조잡기 . 2. Component 스타일링 . 구현 방법 . useState 훅을 이용하여 boolean 상태 값을 핸들링하는 ModalHandler 함수를 만들어 모달을 열거나 닫도록 하였습니다. 상태 값을 변수로 사용하면 모달이 오픈될 때 자동으로 Dom이 재 렌더링 되는 것을 방지하기 위해 useState를 사용하여 구현하였습니다. 어려웠던 점 해결 방법 . 모달을 구현한 뒤 모달 영역을 클릭해도 모달이 닫히는 현상이 있었습니다. 이유는 부모 컴포넌트에 이벤트가 핸들러가 걸려있을 때 자식 컴포넌트에도 같은 핸들러가 작동이 되기 때문이었습니다. 이를 방지하기 위해 stopPropagation 메서드를 사용하여 자식 요소인 하여 문제를 해결했습니다. 결과로 모달 영…