늘 겸손하게

버튼을 클릭하면 다른 페이지로 이동하는 기능을 구현하는데 사용하면 편리한 컴포넌트가 Link 컴포넌트입니다. https://reactrouter.com/docs/en/v6/components/link React Router | Link Declarative routing for React apps at any scale reactrouter.com Link 컴포넌트 내부에 html 버튼 태그를 배치하여 버튼을 클릭했을때 다른 페이지로 이동 가능하도록 할 수 있습니다. 또한 Link 컴포넌트의 속성에 페이지 이동시 필요한 데이터를 추가하는것도 가능합니다. 이동할 경로를 pathname에, 전달할 데이터를 state에 작성 전달한 데이터는 react-router의 useLocation hook으로 받을 수 ..

함수형 컴포넌트 내부에서 useEffect를 사용하던 도중 발생한 경고문입니다. react_devtools_backend.js:4026 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 경고문을 해석해보니 컴포넌트가 useEffect 내부에서 setState를 호출할 경우 발생할 수 있다고 합니다. 경고문에 적혀있는대로 제 코드에서 setState는 useEffect내부에 있었습니..

React에서는 컴포넌트를 만들기 위해 함수형 문법 혹은 클래스형 문법을 사용할 수 있습니다. 컴포넌트를 만드는 두 가지 방법들의 특징을 알아보겠습니다. 클래스형 컴포넌트는 React의 기능을 100% 활용할 수 있습니다. 하지만 함수형 컴포넌트는 컴포넌트 내부의 state를 만들어 사용할 수 없고 컴포넌트 라이프사이클 API를 사용할 수도 없었습니다. 그래서 상위 컴포넌트가 시키는 단순한 일만 처리하는 컴포넌트였습니다. 하지만 리액트 hook이 도입되면서 함수 스타일에서도 state와 라이프사이클 API를 사용 가능하게 되었습니다. React 16.8부터 React hook이 도입되고 공식문서에서도 함수형 컴포넌트와 hook 사용을 권장하고 있습니다. 그렇지만 클래스형 컴포넌트도 계속 지원한다고 하니 ..

현재 개발하고 있는 웹 페이지의 카테고리와 카테고리 내부의 요소들이 너무 많아 한눈에 보여지지 않는 단점이 있습니다. 이를 해결하기 위해 아코디언 스타일을 적용해보겠습니다. 아코디언 스타일은 한번쯤은 봤던 펼치기/접기 기능을 말합니다. 아코디언 스타일을 활용하기 위해 MUI 라이브러리를 사용하겠습니다. 순수 자바스크립트로 아코디언 스타일을 짜는것도 가능합니다. https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with M..