React
-
[React] React Router <NavLink>를 활용한 탭 메뉴 구현하기React 2023. 1. 4. 23:32
React Router의 공식문서를 살펴보면 를 아래와 같이 설명하고 있습니다. A is a special kind of that knows whether or not it is "active". This is useful when building a navigation menu such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected. 의미를 살펴보면 는 acitve 인지 여부를 알려주는 특별한 종류의 이며, 브레드크럼 또는 현재 선택된 메뉴가 표시된 탭 메뉴와 같은 탐색 메뉴를 만들 때 유용하다는 것을 알 수 있습니다. 진행했던 프로젝트에서도 최상단의 탭 메뉴 중 현재 선택된 메뉴가..
-
[React] 이중모달 구현하기React 2022. 12. 29. 23:07
이중모달을 구현했던 과정을 정리해보겠습니다. 먼저, 제가 구현하고자 했던 이중 모달의 형태는 아래 그림과 같이 모달 형식의 글 상세 페이지 내에서 댓글을 추가하거나, 수정하거나, 삭제하기 위한 드롭다운 디자인의 이중 모달입니다. 이중 모달이 닫힌 상태에서 위쪽의 점 버튼을 누르면 이중 모달이 열리고, 이중 모달이 열린 상태에서 점 버튼을 다시 누르거나 이중 모달 외부의 영역을 클릭했을 때 이중 모달이 닫히는 기능을 구현하고자 했습니다. 구현은 점 영역 이외의 문서 전체 영역에서 click 이벤트가 발생했을 때 addEventListener로 이중 모달이 닫히는 함수를 호출하는 방식으로 진행하였고, 상세 코드는 아래와 같습니다. // useDropDown.tsx function useDropDown() {..
-
[React] debouncing 기법을 활용한 검색 기능 구현React 2022. 12. 20. 23:18
글 목록 검색 기능을 구현했던 과정을 정리해보도록 하겠습니다. 먼저, 처음에 검색 기능을 구현할 때에는 아래와 코드와 같이 input 태그에 사용자의 입력이 발생하면 서버에 API 요청을 전송하는 방식을 생각했습니다. const SearchBar = ({ placeholder, setDataList }: SearchBarProps) => { const [keyword, setKeyword] = useState(''); const handleChange = (event: React.ChangeEvent) => { setKeyword(event.target.value); }; // input의 value(keyword)가 변할 때마다 서버에 데이터를 요청함 useEffect(() => { getFiltere..
-
[React] 모달 구현 및 모달 오픈 시 외부(배경) 스크롤 막기React 2022. 12. 16. 15:31
프로젝트를 진행하며 글 상세 페이지를 모달로 구현하게 되었습니다. 기존에 구현해보았던 로그인 모달과는 달리 글 상세 페이지는 글 및 댓글의 내용의 길이에 따라 Modal 내부 영역의 height가 달라지게 되었습니다. 모달 오픈 시 필요에 따라 모달에 스크롤을 적용해야 했기 때문에 CSS의 overflow 속성을 활용하여 이를 구현하고자 했습니다. 처음에는 모달 Wrapper 영역의 overflow-y 속성만 auto 또는 scroll을 적용하면 될 것으로 생각하였으나, 해당 코드만을 추가할 경우 모달 외부 화면의 스크롤과 모달 Wrapper 영역의 스크롤이 이중으로 생성되는 문제가 발생했습니다. 때문에 모달 오픈 시 body 영역의 overflow를 hidden으로 설정하고, 모달을 닫을 때에는 bod..
-
[React] styled-components를 활용한 재사용 컴포넌트 만들기(with. TypeScript)React 2022. 9. 30. 14:13
진행 중인 프로젝트에서 사용되는 대부분의 버튼의 형태가 위 이미지와 같은 디자인이였습니다. 때문에 같은 코드를 반복적으로 작성하기 보다는 공통적으로 사용하는 버튼을 BasicButton이라는 컴포넌트로 만들어 재사용하기로 했습니다. 먼저, 기본적으로 가장 많이 사용되는 버튼의 디자인은 로그인 버튼과 같은 파란 배경, 하얀 글씨의 디자인이였기 때문에 다음과 다음과 같이 코드를 작성했습니다. // BasicButton.tsx interface Props extends ButtonHTMLAttributes { children: React.ReactNode; onClick?: () => void; } const BasicButton = ({ children, ...props }: Props) => { retur..