함수 앞에 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..

💭 querySelector()는 Element 인터페이스의 메소드로, CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항목을 반환해준다. 💭 createElement()는 객체에 메소드를 실행하여 메모리상에 인수 값을 넣어주고, 그 값을 생성한 변수에 넣어줄 수 있다. 💭 addEventListener(’click’ , ) 는 페이지 상에서 클릭할때마다 특정 이벤트를 발생시킨다. 💭 appendChild()는 html 구조에는 존재하지 않는 요소를 자바스크립트를 활용하여 넣어줄 수 있다. ul태그만 존재하는 html 에서 js 를 활용하여 li 요소 만들어 출력하기 html 상의 ul 태그에 해당하는 요소를 찾아준다. const ulEl = document.querySelector('u..