목록전체 글 (186)
hmk run dev
라우팅이란 쉽게말해서 페이지를 돌아다니는 것이다. 일단 패키지를 하나 선택해서 인스톨하자! www.npmjs.com/package/react-router-dom react-router-dom DOM bindings for React Router www.npmjs.com yarn add react-router-dom으로 설치! 아래 코드로 import import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; 아래코드 index.js에 추가 import { BrowserRouter } from "react-router-dom"; 라우트 사용방법 두 가지 Route 사용방법 1: 넘겨줄 props가 없을 때 Route 사용..
먼저 DOM에 대해 알아보자 DOM을 아시나요? DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. 예를 들면, 'div태그'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. 네, 맞습니다! DOM이 트리구조란 소리입니다. DFS BFS 생각이 나네요... DOM 트리 중 하나가 수정될 때 모든 돔을 뒤지는 게 비효율 적이어서 생긴 게 바로 가상 돔이다 가상 돔의 동작 방식은 기존 DOM과 어떤 행동 후 새로 그린 DOM을 비교해서 바뀐 부분만 교체 >> 업데이트 처리가 매우 간결하다 DOM을 그리거나 갈아 끼우는 것은 렌더링, 리렌더링 이라고 한다 라이프 사이클이란? 한마디로 컴포넌트의 인생? 생명주기라고 할 수 있다. 함수형 ..
yarn start 전에 yarn add styled-components 장점 class 이름 짓기에서 해방 컴포넌트에 스타일을 직접 적기 때문에 간단하고 직관적 import logo from './logo.svg'; import styled from 'styled-components' function App() { return ( hello react ); } const MyStyled = styled.div` //스타일드 컴포넌트 작성 방법 width: 50vw; height: 150px; padding: 10px; border-radius: 15px; color: #fff; &:hover: { background-color: #ddd; } background-color: ${(props) => (p..