오늘도 코딩하나

강의 내용: 강의 링크#5.11 ~ #6.4 1️⃣ nested router props 처리react-router-dom v5에서는 prop를 직접 전달할 수 있지만,react-router-dom v6에서는 prop를 직접 전달할 수 없으므로,Outlet을 사용해 자식 컴포넌트가 부모의 데이터를 공유할 수 있도록 한다.    ( 이유에 대한 자세한 설명은 nested Routes 설명 참고 👉 설명보러가기 )// Coin.tsx// Chart.tsxinterface IOutletProps { coinId: string;}function Chart() { const { coinId } = useOutletContext();}   📌 Outlet에서 context를 설정하면 자식 컴포넌트에서 useO..

강의 내용: 강의 링크 #5.0 ~ #5.11  🚨 React Router v5 → v6에 대한 모든 변경점에 대한 정리가 아닌       #5 강의를 수강하면서 나온 내용들에 한해서 정리된 내용입니다.✅ react-router-dom v6   1️⃣ Link to    ▷ v5 버전 {coin.name} →     ▷ v6 버전 {coin.name} →   2️⃣ nested Routes  - Coin.tsx    ▷ v5 버전      ▷ v6 버전  - Router.tsx }> } /> } />    - Coin.tsx   3️⃣ react-query      이전에는 react..

강의 내용: 강의 링크 #5.0 ~ #5.11 ✅ 페이지간 데이터 전달 기능     ➰ useLocation 현재 URL 정보를 가져오는 hookpathname, search, hash, state, key 등의 정보 제공 {coin.name} →const { state } = useLocation(); {state?.name ? state.name : loading ? "Loading..." : infoData?.name}useLocation().state를 사용하면 URL에 보이지 않는 방식으로 데이터를 전달할 수 있음⇒ 비하인드더씬/${coin.id} 페이지로 이동하면서 state 값을 함께 전달useLocation().state에서 전달된 값을 받아서 사용 ✅ 중첩 라우트 ..

강의 내용 : 강의 링크 #4.0 ~ #4.8 ○ browserRouterimport { BrowserRouter } from "react-router-dom";import Header from "./component/Header";import { Routes, Route } from "react-router-dom";import Home from "./screen/Home";import About from "./screen/About";function Router() { return ( } /> } /> );}export default Router;App.js에서 Router import해서 사용 ○ createBrowserRo..

강의 내용 : 강의 링크 #3.0 ~ #3.7 ○ Interface   ※ interface : object shape을 TypeScript에게 설명해준다.    * Prop Types는 prop이 거기에 있는지 없는지 확인해주지만, 코드를 실행한 "후"에만 확인 가능하다.   * 하지만 우리는 TypeScript처럼 코드 실행 "전"에 확인 하고싶다!!   * 그래서 우리는 Prop Types를 사용하지 않고, prop들을 Typescript로 보호해줄거다!     ⇒ Interface - Circle.tsximport { styled } from "styled-components";interface ContainerProps { bgColor: string;}const Container = styl..

강의 내용 요약 : 강의 링크 #2.0 ~ #2.7 ○ styled-componentimport styled from "styled-components";const Father = styled.div` display: flex;`;const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px;`;const Circle = styled(Box)` border-radius: 50px;`;function App() { return ( );}export default App;style과 구현 부분으로 나누어지고, 구현 부분은 훨씬 가독성이 좋아진다.b..

강의 내용 요약#7.5 ~ #7.9 ○ react-router-domRouter만들고 그 안에 Route 만들엇어그리고 누군가 /로 가면 Home을 보여줄거야   - hash router -> 뒤에 뭔가가 붙어 ( http://localhost:3000/#/detail )  - browser router -> 웹사이트 url처럼 생김 ( http://localhost:3000/detail )=> 차이점 : url 차이뒤에 뭘 붙이기 싫으니까 보통은 browser router을 사용해  a href="/movie">{title}a>보통 이렇게 썼었을거야하지만 페이지 전체가 재실행돼-> Link : 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트Link to="/movie">{title}..

강의 내용 요약#7.0 ~ #7.4○ Practice - State, Effect, props   1. setModified 함수const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDos((currentArray) => [toDo, ...toDos]); setToDo(""); }; setState 수정하는 함수를 사용할 ..