함수 앞에 use 를 붙여 리액트에서 낚아서 슬 수 있도록 만든걸 react hooks 라고 부른다. 함수형 컴포넌트가 클래스형 컴포넌트같은 기능을 할 수 있게 해준다. useState class 컴포넌트로 state 를 활용해서 만들것이다. import React from 'react'; export default class Example1 extends React.Component { state = {count : 0}; render() { const {count} = this.state; // state 는 객체 return ( You clicked {count} times Click me ); } click = () => { this.setState({count: this.state.count +..

아무런 css 요소도 넣지 않은 버튼을 추가하면 그냥 회색의 밋밋한 버튼이 추가될것이다. 이걸 styled component 를 활용해서 꾸며보자. import logo from './logo.svg'; import './App.css'; import StyledButton from './components/StyledButton'; function App() { return ( 버튼 버튼 ); } export default App; 위처럼 버튼을 두가지 생성했는데, 하나는 props 로 primary 를 줬다. src 내부에 components 라는 폴더를생성하고 그 안에 StyledButton.jsx 로 컴포넌트를 생성한다.ㅍ import styled, {css} from 'styled-compone..

import logo from './logo.svg'; //import './App.css'; //import './App.scss'; import styles from "./App.module.css"; console.log(styles); // { // App: "App_App__A3szl" // App-logo: "App_App-logo__tm8C+" // App-logo-spin: "App_App-logo-spin__yh9Mn" // header: "App_header__M7J7p" // link: "App_link__3kObV" // logo:"App_logo__0lOZv" // } => styles 라는 객체 function App() { return ( Edit src/App.js and s..