khakha's dev log

https://react.dev/learn/passing-data-deeply-with-context Passing Data Deeply with Context – React The library for web and native user interfaces react.dev 위 글을 참고하여 작성하였습니다. 1. The problems with passing props React 컴포넌트는 props를 통해 부모에서 자식으로 데이터를 넘겨준다. 하지만, 컴포넌트 구조의 깊이가 깊어 데이터를 보여주어야 할 자식 컴포넌트가 멀리 떨어져 있다면 "Prop Drilling" 이 발생한다. Prop Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React C..

1. BrowserRouter react 프로젝트에 React Router를 적용할 때 React Router Dom에 내장되어 있는 BrowserRouter 컴포넌트로 감싸준다. 이 컴포넌트는 Histroy API를 사용하지 않고도 url을 변경하고 현재 주소의 경로에 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 도와준다. 1.1 Router.tsx Route 컴포넌트를 통해 path, element를 지정해주고 url을 분기처리해준다. Route 컴포넌트는 Routes로 감싸줘야함. // Router.tsx import { BrowserRouter, Route, Routes } from "react-router-dom"; import Header from "../Components/Header..

styled-components의 createGlobalStyle을 사용해서 전역스타일을 지정해줄 수 있다. 각 컴포넌트의 스타일을 지정해주기 전에 브라우저에 기본 적용된 css를 리셋해주었다. https://styled-components.com/docs/api#createglobalstyle styled-components: API Reference API Reference of styled-components styled-components.com App.js function App() { const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, block..