svg에서 바꾸고자 하는 요소를 current
로 바꿔줌
<svg
xmlns="http://www.w3.org/2000/svg"
width="current"
height="current"
viewBox="0 0 24 24"
>
<path fill="current" fill-rule="evenodd" d="...." />
</svg>
사용하는 컴포넌트에 props로 current 값 지정하여 내려줌
import { ReactComponent as Reservation } from "assets/icon-24-reservation.svg";
<Reservation width="10" height="10" fill="blue" />;
react-router-dom의 Outlet을 사용하여 레이아웃 처리
layout/index.tsx
import styles from './layout.module.scss'
import Footer from 'components/layout/footer'
import { Outlet } from 'react-router-dom'
import Header from './header'
const Layout = () => {
return (
<div className={styles.wrapper}>
<Header />
<main className={styles.main}>
<Outlet />
</main>
<Footer />
</div>
)
}
export default Layout
index.tsx
import Layout from 'components/layout'
import { Route, Routes } from 'react-router-dom'
import SearchPage from './SearchPage'
import OtherPage from './OtherPage'
const App = () => {
return (
<Routes>
<Route element={<Layout />}>
<Route path='/' element={<SearchPage />} />
<Route path='other' element={<OtherPage />} />
</Route>
</Routes>
)
}
export default App
이렇게하면 layout 컴포넌트는 그대로 있고 <Outlet />
부분이 SearchPage와 OtherPage로변하게 된다
작업 내용
라이브러리 팁
star수가 진짜 높은데 오류가 난다 → 99.99% 내 잘못 (2K 정도)
안써도되는 라이브러리
일일 게스트로 오신 양민열 코치님께서 주신 코멘트이다.
삼항 연산자는 랜더단에서 쓰지 말아야 한다 ⇒ 가독성이 굉장히 떨어짐
결국 하고싶은 말은 가독성! 가독성!
depth를 깊게 가져가지 마라 → 커스텀 훅 쓰면됨 (useMemo,useCallback)
useEffect(()=>{
// ...
// ...
},[이 부분이 depth])
React + Redux
💡 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법.
과정
public/index.html에 Modal이 렌더링 될 위치 심어주기
Portal.js(ts) 만들기
//Portal.js
import reactDom from "react-dom";
const ModalPortal = ({ children }) => {
const el = document.getElementById("modal");
return reactDom.createPortal(children, el);
};
export default ModalPortal;
Modal component 만들기
//Modal.js
import React from "react";
import ModalPortal from "./Portal";
import styled from "styled-components";
const Modal = ({ onClose}) => {
return (
<ModalPortal>
<Background>
<Content>
// ... modal 안의 contents 코드 ...
</ Content>
</Background>
</ModalPortal>
);
};
export default Modal;
Modal을 띄울 컴포넌트에 Portal,Modal 조건부 렌더링
//modal을 띄우려는 컴포넌트 파일
import styled from "styled-components";
import ModalPortal from "../Components/Modal/Portal";
import Modal from "./Modal/Modal";
const Carousel = props => {
const [modalOn, setModalOn] = useState(false);
const handleModal = () => {
setModalOn(!modalOn);
};
return (
<>
<Container>
<button onClick={handleModal}/>
// ... 코드 생략 ...
<ModalPortal>
{modalOn && <Modal onClose={handleModal} />}
</ModalPortal>
</Container>
</>
);
};
export default Carousel;
<!—[if IE]>
<div id=”ieGuide”>
<div>돌아가주세요</div>
<div>크롬다운로드 링크</div>
</div>
<![endif]—>
오늘은 기업 과제도 끝냈고 내일 개인 공부를 할 시간이 주어졌다.
redux-toolkit을 사용해 볼 예정이고, react-query도 사용을 해 볼 예정이다.
추가적으로 Intersection Observer API 의 동작 방식을 알고 사용하기 위해 구현 해 볼 예정이고
오늘 강의 때 나왔던 GA에 대해서도 다시 봐바야겠다.
현업에 계시는 분들에게 직접 듣고있으니 꿈도 커지고, 실제로 점점 성장하는게 느껴진다.