중첩 라우팅 (Nested Routes) React Router의 가장 강력한 기능 중 하나이므로 복잡한 레이아웃 코드를 어지럽힐 필요가 없다. 대부분의 레이아웃은 URL의 세그먼트에 연결되며 React Router는 이를 완전히 수용한다. Outlet 자식 경로 요소를 렌더링하려면 부모 경로 요소에서 을 사용해야한다.이렇게 하면 하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있다. 부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌더링 하지 않는다. react-router-dom에서 가져와 사용한다. useNavigate경로를 바꿔준다. navigate('/home') ===> localhost:3000/home useParams:style 문법을 p..
Frontend/React
React Router Dom 이란? React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍쳐와 달리 React Router Dom은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다. Single Page Application (SPA) 리액트는 SPA이기 때문에 하나의 index.html 템플릿 파일을 가지고 있다. 이 하나의 템플릿에 자바스크립트를 이용해서 다른 컴포넌트를 이 index.html 템플릿에 넣으므로 페이지를 변경해주게 된다. 이 때 React Router Dom 라이브러리가 새 컴포넌트로 라우팅/ 탐색을 하고 렌더링하는데 도움을 주게 된다. 1. React Rou..
이벤트 리스너 이벤트 리스너랑 이벤트가 발생했을 때, 그 처리를 담당하는 함수를 가르킨다. 이벤트 핸들러라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다. 만약, 이벤트 리스너를 사용하지 않는 경우 , 리스너 제거를 통해 이벤트가 발생할 때 호출되는 함수를 더이상 호출되지 않게 해당 이벤트 리스너를 지워주는 부분도 필요하다. addEventListener removeEventListener const Nav = () => { const [show, setShow] = useState(false); useEffect(() => { window.addEventListener('scroll', () => { if(w..
Styled Component 란? Styled Component란 Css-in-JS라고 하는 javascript 파일 안에서 CSS를 처리 할 수 있게 해주는 대표적인 라이브러리이다. 설치 방법 npm install --save styled-components yarn add styled-components
