💡 브라우저의 가로 창 사이즈가 변경됐을때 변경된 정도를 가져오는 훅을 만들 예정이다. import React from "react"; export default function useWindowWidth() { const [width,setEidth] = React.useState(window.innerWidth); // window.innerWidth : 현재 브라우저의 가로값 return width; } useWindowWidth.js import logo from './logo.svg'; import './App.css'; import useWindowWidth from './hooks/useWindowWidth'; function App() { const width = useWindowWidth..

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

props 는 컴포넌트 외부에서 컴포넌트에게 주는 데이터고, state 는 컴포넌트 내부에서 변경할 수 있는 데이터이다. (컴포넌트의 상태에 따라 다르게 보여줄 수 있는 데이터) 둘 다 변경이 발생하면 랜더가 다시 일어날 수 있다. Render() → props와 state 를 바탕으로 컴포넌트를 그리는데, function 컴포넌트에서 props 정의 function Component(props) { return ( {props.message} 이것은 함수로 만든 컴포넌트 입니다. ); } const root = ReactDOM.createRoot(document.getElementById('root')); const element = ;root.render(element); class 컴포넌트 clas..

class 로 정의 class ClassComponent extends React.Component { render() { return Hello } } → 선언한 리액트의 컴포넌트가 있는데, 그 컴포넌트를 상속받아서 구현한다는 뜻이다. ReactDOM.render( , document.querySelector('#root') ); → 리액트 라이브러리 페이지에서 다룬 것 처럼, ReactDOM.render 의 첫번째에는 표시할 내용 , 두번째에는 그 내용을 담을 곳 이다. id가 root 인 곳에 위에서 선언한 ClassComponent 의 return 값을 넣는다. function 키워드를 이용하여 컴포넌트 정의 function FunctionComponent() { return Hello; } Re..