✅ Object 자료형이란?
자바스크립트에서 객체(object)는 여러 데이터를 담을 수 있는 자료형입니다. 객체는 이름과 값의 쌍으로 이루어진 속성(property)을 포함할 수 있습니다. 이러한 속성은 문자열 또는 심볼 값을 가질 수 있고, 객체, 함수, 배열 또는 기본 데이터 유형(숫자, 문자열, 불리언 등)의 값을 포함할 수 있습니다.
JavaScript 중괄호 { } 로 정의되며, 속성들은 쉼표로 구분됩니다. 각 속성-값 쌍은 쉼표로 구분되며, 속성 이름은 문자열이어야 하고, 값은 문자열, 숫자, 불리언, 객체, 배열, 또는 null일 수 있습니다.
예를 들어, 다음은 객체를 정의하는 예시입니다.
const panda = {
name: "푸바오",
age: 17,
hobbies: ["eating", "playing"]
};
name: 문자열 값 ("푸바오")
age: 숫자 값 (17)
hobbies: 배열 (문자열의 배열)자바스크립트 객체는 동적으로 속성을 추가, 수정 또는 삭제할 수 있습니다. 객체 내의 속성은 해당 속성의 이름을 사용하여 접근할 수 있습니다. 예를 들어, panda.name은 "푸바오"를 반환합니다.
객체는 JavaScript 프로그래밍에서 중요한 개념이며, 데이터를 구조화하고 조작하는데 유용하게 사용됩니다. 객체는 프로그램의 다양한 부분에서 사용되며, 자바스크립트에서 매우 흔하게 쓰입니다.
React에서 라우팅 설계
React에서 라우팅이란, 다양한 화면(페이지) 간의 전환 및 네비게이션을 관리하는 기술을 의미합니다. React 애플리케이션에서 여러 페이지를 갖고 있을 때, 사용자가 각 페이지로 이동하고 애플리케이션의 상태를 변경하면서 화면이 동적으로 업데이트될 수 있도록 라우팅을 구현할 수 있습니다.
React에선 React-Router를 이용하여 라우팅을 구조화하고 설계합니다. 이 때 사용되는 항목들은 아래와 같습니다.
- Router (라우터) <BrowserRouter> : HTML5의 History API를 사용하여 브라우저의 URL을 관리하는 라우터입니다. 주로 브라우저 환경에서 사용됩니다. <HashRouter> : URL의 해시(fragment)를 사용하여 라우팅을 관리하는 라우터입니다. 주로 정적 파일 서버에서 사용되거나 브라우저 호환성을 고려할 때 유용합니다.
- Route (라우트) <Route path="/somepath" component={SomeComponent} /> : 특정 경로(path)에 대한 컴포넌트(component)를 렌더링합니다. 지정된 경로에 도달하면 해당 컴포넌트가 렌더링됩니다. 보통 나누어지는 페이지라고 생각하면 됩니다.
- Outlet (아웃렛) <Outlet /> : 중첩된 라우터에서 부모 라우터 컴포넌트 내에서 자식 라우터 컴포넌트를 렌더링하는 역할을 합니다. Outlet은 중첩된 라우터 사이에서 자식 라우터가 렌더링될 위치를 나타냅니다.
- Link (링크): <Link to="/somepath">Go to Some Path</Link> 다른 경로로 이동할 때 사용하는 컴포넌트입니다. 클릭 시, 지정된 경로로 이동하게 됩니다.
- Redirect (리다이렉트): <Redirect to="/newpath" /> : 특정 경로로 리다이렉트할 때 사용합니다. 사용자가 지정된 경로로 이동하려고 할 때, 자동으로 새로운 경로로 리다이렉션됩니다.
- Switch (스위치) <Switch>: 여러 <Route> 컴포넌트 중 첫 번째로 매치되는 라우트만 렌더링하도록 도와주는 컨테이너입니다. 중첩된 라우트에서 사용하여 중복된 경로를 방지할 수 있습니다.
라우팅 구조는 위의 컴포넌트들을 적절하게 조합하여 정의됩니다. 이러한 컴포넌트들을 사용하여 React 애플리케이션에서 다양한 화면 간의 전환을 관리하고 네비게이션을 구현할 수 있습니다.
일반적으로 React Router에서 라우팅을 구현할 때는 BrowserRouter를 루트 컴포넌트로 사용하고, Route, Link, Switch, Outlet, 그리고 Redirect 등을 조합하여 필요한 네비게이션 구조를 생성합니다.
✍️ Route 사용 예제
이 예제에서는 / 경로는 Home 컴포넌트를, /about 경로는 About 컴포넌트를 렌더링합니다.
import React from 'react';
import { BrowserRouter, Router, Route, Link } from 'react-router-dom';
const Home = () => <h2>홈 페이지</h2>;
const About = () => <h2>소개 페이지</h2>;
const App = () => (
<Router>
<nav>
<Link to="/">홈</Link>
<Link to="/about">소개</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
export default App;
💡useNavigate( )
useNavigate는 함수 컴포넌트 내에서 라우팅을 수행하는 데 사용됩니다. 이 후크를 사용하면 함수 컴포넌트 내에서 라우팅을 쉽게 제어할 수 있습니다.
const MyComponent = () => {
const navigate = useNavigate();
const handleClick = () => {
// 다른 경로로 이동
navigate('/another-page');
};
return (
<div>
<button onClick={handleClick}>다른 페이지로 이동</button>
</div>
);
};
💡 Nested Routes (중첩 라우트)
Nested routes(중첩된 라우트)은 하나의 라우트가 다른 라우트에 중첩되어 있는 상황을 의미합니다. 중첩된 라우트를 구현하려면 Route 컴포넌트의 element 속성에 중첩된 컴포넌트를 지정하고, 중첩된 컴포넌트에서는 Outlet 컴포넌트를 사용하여 하위 라우트를 렌더링합니다.
보통 여러 페이지들이 필요한 경우에 사용 됩니다. 페이지 간 차이점이 크지 않을 때, 내부의 데이터가 조금씩 변경되는 경우 Nested Routes를 사용하면 일부분만 수정되어 페이지 렌더링을 할 수 있습니다.
✍️ 사용 예시
import { Router, Route, Routes, Outlet } from 'react-router-dom';
const App = () => (
<Router>
<Routes>
<Route
path="/dashboard"
element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
<Route path="*" element={<NotFound />} />
</Route>
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
const Dashboard = () => (
<div>
<h1>상단 메뉴</h1>
<nav>
<Link to="profile">프로필</Link>
<Link to="settings">설정</Link>
</nav>
<hr />
<Outlet /> {/* 중첩된 라우트를 렌더링할 위치 */}
</div>
);
/dashboard/profile 경로로 접근했을 시 함께 라우팅 되는 컴포넌트
const Profile = () => (
<div>
<h2>프로필 페이지</h2>
</div>
);
/dashboard/settting 경로로 접근했을 시 함께 라우팅 되는 컴포넌트
const Settings = () => (
<div>
<h2>설정 페이지</h2>
</div>
);
/dashboard/* //잘못된 경로로 접근했을 시 함께 라우팅 되는 컴포넌트 */
const NotFound = () => (
<div>
<h2>페이지를 찾을 수 없습니다.</h2>
</div>
);
이 예시에서 /dashboard 경로는 Dashboard 컴포넌트를 렌더링하고, /dashboard/profile과 /dashboard/settings 경로는 각각 Profile과 Settings 컴포넌트를 중첩된 라우트로 렌더링합니다.
중첩된 라우트를 렌더링하는 위치는 Outlet 컴포넌트로 지정됩니다.
이렇게 하면 /dashboard 경로로 접근했을 때 Dashboard 컴포넌트가 보이고, Dashboard 내부의 Outlet은 중첩된 라우트의 위치를 나타내며,
/dashboard/profile과 /dashboard/settings에 각각 매핑되는 컴포넌트가 렌더링됩니다. 이러한 방식으로 중첩된 라우트를 구성할 수 있습니다.
💡 URL 파라미터
URL 파라미터는 웹 페이지의 URL에 포함된 특정 정보를 나타내는 값입니다. 이러한 파라미터는 주로 웹 애플리케이션에서 동적으로 데이터를 전달하고 공유하는 데 사용됩니다. URL 파라미터는 물음표( ? ) 뒤에 키-값 쌍으로 이루어진 문자열로 표현되며, 여러 개의 파라미터는 앰퍼샌드( & )로 구분됩니다.
✅ useParams( ) : URL에서 파라미터 값을 추출하는 데 사용됩니다. 이 후크는 React 함수 컴포넌트 내에서 사용되며, 특정 URL 경로에서 동적으로 변하는 파라미터 값을 가져올 수 있습니다.
const Component = () => {
const { paramName } = useParams();
// paramName은 URL에서 추출한 동적 파라미터 값입니다.
return <div>{paramName}</div>;
};
위의 예시에서 paramName은 URL에서 추출한 동적 파라미터의 값입니다.
예를 들어, URL이 /users/:id 형식으로 되어있고 현재 페이지의 URL이 /users/123이면,
paramName에는 "123"이 할당됩니다.
이러한 방식으로 useParams를 사용하면 URL에서 동적으로 변하는 파라미터 값을 컴포넌트 내에서 사용할 수 있습니다. 이를 통해 동적 라우팅을 처리하거나 특정 ID나 식별자를 기반으로 데이터를 불러오는 등의 상황에서 매우 유용합니다.
'[FRONTEND] > REACT' 카테고리의 다른 글
| [REACT] 기본 문법_Props ! (1) | 2023.10.20 |
|---|---|
| [REACT] 기본 문법_컴포넌트 문법 & Map( ) 함수 (0) | 2023.10.12 |
| [REACT] 기본문법 (0) | 2023.10.05 |
| [REACT] 시작하기 (1) | 2023.10.03 |
| [REACT] REACT 시작하기 (0) | 2023.10.03 |
