라우터 - 중첩 라우팅 outlet

중첩 라우팅 중첩 라우팅이란 여러 수준의 경로를 가질 수 있는 라우팅 구조를 의미한다. 쉽게 말해 해당하는 페이지에서 좀 더 구체적으로 구분을 지어 화면을 표시해 줄 필요가 있을 때 사용된다. 예를 들어 웹 페이지를 하나 구현한다고 했을 때, 웹 페이지의 헤더는 계속 고정으로 두면 되기 때문에 쉽게 구현할 수 있다. 하지만 마이페이지에서 사이드바를 띄우고 그 내부에 또 라우팅을 하고 싶은 경우가 있을 수 있다. 이때 react-router-dom 에서 제공하는 Outlet 기능을 사용하여 구현할 수 있게 된다. Outlet은 단순히 컴포넌트가 렌더링되는 장소를 가리키게 되는데 다른 라우트 컴포넌트드링 중첩될 때, 이전 라우트의 하위에 해당하는 컴포넌트를 렌더링하는 역할을 한다. const Mypage =..

• format_list_bulleted Frontend/React
• · 2023. 12. 5.
• textsms

Hook

Hooks React 함수형 컴포넌트에서 상태(state)와 생명주기를 사용할 수 있게 해주는 기능 useState Hook 상태(state)를 함수형 컴포넌트에서 관리할 수 있게 해준다. 일반적으로 배열의 형태로 반환되며, 첫번째 값이 상태 값, 두번째 값이 상태값을 업데이트 해주는 함수를 의미한다. import React, {useState} from 'react'; function Example() { const [num(변수), setNum(함수)] = useState(1); const Click = () => { setNum(num+1); }; return ( 값 : {num} 증가 ); } useEffect Hook 생명주기 메서드(componentDidMount, componentDidUpd..

• format_list_bulleted Frontend/React
• · 2023. 11. 3.
• textsms