SignInPage.js (새로 만든 페이지)
Login.js
기존에 만들어둔 로그인 화면에서,
react router의 useNavigate 훅을 사용하여
새로 만든 페이지인 signInPage로 이동하도록 한다.
먼저 useNavigate 훅을 호출하여 함수 생성.
"signInPage/"로 이동하는 navgate함수를 호출하는 someWhere라는 함수를 정의한다.
이를 통해 React Router에서 해당 경로로의 페이지 이동할 수 있다.
즉, 이 함수가 호출되면 사용자는 "signInPage/" 경로로 이동하게 된다.
<Route path="signInPage/" element={<SignInPage />} />
이 코드를 보면
React Router의 Route 컴포넌트를 사용하고 있다.
path 속성은 현재 라우팅되는 경로와 비교되며,
경로가 일치하는 경우 해당 element를 렌더링한다.
여기서 경로는 "signInPage/"로 설정되어 있습니다.
element 속성은 해당 경로에 대응되는 컴포넌트를 지정하는데
위 코드에서는 <SignInPage /> 컴포넌트가 해당 경로로 렌더링된다.
이 구성을 통해, 사용자가 "signInPage/" 경로로 이동하면
Route 컴포넌트는 SignInPage 컴포넌트를 렌더링하여
해당 페이지의 내용을 사용자에게 표시한다.
컴포넌트
리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있습니다. 컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, MVC 의 뷰를 독립적으로 구성하여 재사용할 수 있습니다. 리액트의 중요한 핵심인 '컴포넌트'에는 함수 컴포넌트, 클래스 컴포넌트 2가지가 있습니다. 출처:https://life-with-coding.tistory.com/508[코딩젤리:티스토리]
'Framework > react' 카테고리의 다른 글
| npm으로 react 프로젝트 생성하기 (0) | 2024.05.21 |
|---|---|
| opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ] 에러 해결 과정 (0) | 2024.01.10 |
| [React] useEffect 사용해보기, 의존성에 따른 실행차이. (0) | 2023.12.14 |
| [React]useState 사용해보기// error해결 :input is a void element tag and must neither have `children` nor (0) | 2023.12.12 |
| [Github] vscode github 계정 변경하기 unable to access 오류 해결하는 과정 (4) | 2023.12.05 |
