분류 전체보기
-
Compound 패턴React/design patterns 2023. 12. 14. 12:57
컴파운드 컴포넌트 패턴은 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 해준다. 디자인시스템을 만들기 위해 래퍼런스를 찾는 중, Bootstrap이 해당 패턴을 사용하여 컴포넌트를 만들고 있었다. 장점: 컴파운드 패턴은 동작 구현에 필요한 상태를 내부적으로 가지고 있는데 이것을 사용하는 쪽에서는 드러나지 않아 걱정 없이 사용할 수 있다. 또 이 패턴을 사용하면 자식 컴포넌트들을 일일히 import할 필요 없이 기능을 사용할 수 있다. Context API 를 활용해서 컴파운드 패턴을 구현했고, 사용자가 토글 버튼을 눌렀을 때 나타날 메뉴를 렌더링하는 컴포넌트를 만들어 보았다. Toggle, List, Item 컴포넌트가 FlyOutContext Provider에 접근할 수 있도록 해당 컴포넌트는 Fl..
-
react-router-domReact/react 2023. 12. 5. 12:41
react-router에서 자주 사용했던 함수들을 정리, useParams() path: '/videos/:keyword ' path 값의 페이지에서 param 값을 가져올 수 있다. import { useParams } from "react-router-dom"; const { keyword } = useParams(); useNavigate() onclick={() => navigate(`/videos/watch/${video.id}`)} window.location 과 vue의 router.push 로 생각해주면 되겠다. import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); useLocation() onClic..
-
Arrow Function 을 다시 알기JavaScript 2023. 11. 26. 12:58
전달하는 인자값과 호출하는 것이 같으니까 그냥 함수의 참조값만 전달해줘도 된다. 그게 더 깔끔하다. 아래 코드에서 onFilterChange에 대한 부분을 보도록 하자! Before) const filters = ['all', 'active', 'completed']; function App() { const [filter, setFilter] = useState(filters[0]); return ( setFilter(filter)} /> ); } After) const filters = ['all', 'active', 'completed']; function App() { const [filter, setFilter] = useState(filters[0]); return ( ); }