hmk run dev

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..

SCSS란 그냥 CSS를 편하게 쓰도록 도와주는 친구라고 보면 된다 뒤에 .scss 라고 붙인 파일을 붙여저 style.css에 있는 내용을 모두 복사 붙이기 그리고 터미널에서 scss 확장 파일을 인스톨 해줘야한다 # 오류 메시지를 보면서 하나씩 설치하면 너무 느리니, 이번엔 제가 필요 패키지를 싹 가져왔어요! # 그대로 복사해주세요! 아래 코드로 scss 확장 설치 yarn add node-sass open-color sass-loader classnames 기본문법은 css와 유사하다 그러나 nesting이 가능하다 아래처럼 묶어서 ```scss //scss 네스팅 (묶어주기) div { p { color: #888888; font: { // 폰트 속성도 묶어주기 family:sans-serif; ..

리액트는 기본적으로 단방향으로만 데이터 전송?이 가능하다 부모컴포넌트는 자식에게 데이터를 넘겨줄 수 있지만 자식컴포넌트는 부모에게 데이터를 줄 수 없다! 함수형 컴포넌트의 장점 클래스형 컴포넌트보다 선언이 간편하다. function App() ... 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다. 프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작다. (클래스형 컴포넌트와의 성능과 파일 크기 면에선 크게 차이가 없지만 함수형 컴포넌트가 좀 더 작음) 하지만 큰 단점이 하나 있다. 함수형 컴포넌트의 단점 state 와 라이프사이클 API 사용이 불가능하다. 그렇지만 이 단점은 리액트 v16.8 버전 이후 Hooks 라는 기능이 도입 되면서 해결 되었다. 클래스형 컴포넌트와 똑같이 사용할 수 있는 것..