개발공부일지
React - React Router Hook, Styled Component, HOC, Atomic Pattern 본문
목차
1. React Router Hook
2. Styled Component
3. 고차 컴포넌트(HOC, Higher Order Component)
4. Atomic Pattern
1. React Router Hook
- 리액트의 페이지는 어떤 컴포넌트를 보여줄지 URL로 요청 보냈을때
- 페이지 전환 이벤틀르 막고
- URL 내용을 가지고 조건 처리해주면 컴포넌트가 바껴서 페이지 전환된것처럼 보임
- 쇼핑몰 페이지에서
- params 값을 가지고 처리한다거나, query 로 처리하는데 ---> hook을 사용
- 상품을 검색했을때 state 상태값에만 저장하면
- 검색한것을 브라우저가 url 저장해두면 공유한다면 /shop/params
- URL 파라미터일 경우 : /:shop/:type/:option
- 쿼리스트링일 경우 : /search?type=1&option=2
import { useLocation, useParams, useSearchParams } from "react-router-dom";
- useLocation : 현재 브라우저의 URL 정보 가져옴
- useParams : URL 파라미터 값을 객체 형태로 파싱해서 가져옴
- useSearchParams : querystring을 파싱해서 매개변수 값을 가져옴
- 첫번째값은 쿼리내용을 가져올수있는 get메서드객체
- 두번째는 쿼리값을 변경해야할때 사용하는 메서드
const Detail = () => {
// DB가 없으므로 임시데이터
let tempItem = [
{ num: 10, name: "목도리" },
{ num: 20, name: "장갑" },
{ num: 30, name: "어그부츠" },
];
const location = useLocation();
console.log(location);
const params = useParams();
console.log(params);
const [query, setQeury] = useSearchParams();
// 배열로 반환
console.log(query.get("num2"));
console.log(query.get("num3"));
return (
<>
<Header name={"상세페이지"} />
<div>{tempItem[params.id].num}개</div>
<div>{tempItem[params.id].name}</div>
<Body path={"/shop"} pageName={"상품 페이지"} />
</>
);
};- http://localhost:3000/detail/1/1/1?num2=1&num3=2 이렇게 강제로 입력하면 console 찍은것을 볼수있다.
2. Styled Component
import React from "react";
import styled from "styled-components";
// JSX 문법 태그함수
const HeaderStyle = styled.div`
font-size: 15px;
width: 100%;
height: 60px;
color: blue;
`;
const Header = ({ name }) => {
return <HeaderStyle width={"60px"}>{name}</HeaderStyle>;
};
export default Header;- props로 전달한 값을 `` 안에 적어 동적인 스타일 적용가능
3. 고차 컴포넌트(HOC, Higher Order Component)
function App() {
const [login, setLogin] = useState(false);
const Redirect = () => {
if (login) return <Mypage login={login} />;
return <Navigate to={"/login"} />;
};
return (
<div className="App">
<Routes>
<Route path="/" element={<Main />} />
<Route path="/shop" element={<Shop />} />
<Route path="/mypage" element={<Redirect />} />
<Route path="/login" element={<Login login={login} setLogin={setLogin} />} />
<Route path="/detail/:id/:num/:name" element={<Detail />} />
</Routes>
</div>
);
}const Login = ({ login, setLogin }) => {
return (
<>
<Header name={"로그인 페이지"}></Header>
<button
onClick={() => {
setLogin(!login);
}}
>
{login ? "로그아웃" : "로그인"}
</button>
<Body path={"/"} pageName={"메인페이지"}></Body>
</>
);
};
- 자식 컴포넌트에서 상태를 끌어올려서 부모의 상태를 변경해준다!!
4. Atomic Pattern
- react 디자인 패턴중 하나
- 장점 :
- 컴포넌트의 재사용을 극한으로 사용 (장점)
- 가장단위부터 만들어나가는 원자(버튼, 아이콘) → 분자 → 유기체(물건, 헤더, 바디) → 템플릿 → 페이지 순으로
- 컴포넌트를 모아서 상위의 컴포넌트를 만들어가는 구조
- 단점 :
- 구조를 잘못 사용하면 재활용불가
- 데이터 흐름에 따라 작성하지않으면 유지보수성이 떨어짐, 복잡도가 높아짐, 상태변수 관리 어려워짐
- props 드릴링 주의
① 원자 atoms : 가장 최소의 단위 컴포넌트
예) 버튼, 텍스트 등등의 부품
② 분자 molecules : 원자 단위가 모여서 만들어진 컴포넌트 (명확한 용도의 재사용성을 가진 컴포넌트)
예) 로그인 입력폼입력폼
③ 유기체 organisms : 분자, 원자 단위가 모인 컴포넌트
예) 헤더, 푸터
④ 템플릿 templates : 유기체가 모여 구조 및 레이아웃을 구성하는 컴포넌트
예) 컨텐츠를 동작하는 요소(동적요소)
⑤ 페이지 pages : 템플릿의 동적인 동작을 다 끝내고 생성된 데이터들의 집합으로 표현된 하나의 컴포넌트
예) 완성된 페이지
※ 설치하기
npx create-react-app boram
npm install react-router-dom@6
npm i styled-components
※ styled-component
https://www.npmjs.com/package/styled-components
styled-components
CSS for the <Component> Age. Style components your way with speed, strong typing, and flexibility.. Latest version: 6.1.1, last published: 22 days ago. Start using styled-components in your project by running `npm i styled-components`. There are 23186 othe
www.npmjs.com
※ vscode에서 vscode-styled-component 검색 후 설치하면 자동완성 가능
※ 과제 : express server (db) 로그인기능 추가해서 마이페이지 접근해보기, 카테고리(햄버거 네비게이션바)
'React' 카테고리의 다른 글
| React - children props, hooks (1) | 2023.12.04 |
|---|---|
| React - pair coding (login, board CRUD) (0) | 2023.12.01 |
| React - learn - Updating Objects in State, Updating Arrays in State (객체, 배열로 상태 업데이트하기) (0) | 2023.11.29 |
| React - learn - Queueing a Series of State Updates (상태 업데이트 대기열에 추가하기) (0) | 2023.11.29 |
| React - learn - Reacting to Input with State (input box 사용해보기) (0) | 2023.11.29 |
