dukDukz

import React from 'react' import styled from 'styled-components' const ButtonStyle = { 'background' : 'black', 'border' : 'none', 'color' : 'white', 'padding' : '7px 14px' } const Button = styled.button` background : #000; border : none; color : white; padding : 7px 14px; ` const ButtonHover = styled(Button)` background : #007bff; :hover{ background : #0069d9; } ` const Index = () =>{ const inpu..

[구조] Layout 컴포넌트 안에 LoginBox LoginBox 컴포넌트 안에 Login Login 컴포넌트 안에 Button 여기에는 화면에 표출될 내용이 들어간다 이렇게 되어있는 컴포넌트를 LayoutContext로 묶어주었다. 이렇게 하면 최하위 컴포넌트에서 상태값을 전달전달 해서 받는것이 아니라 바로 사용할 수 있게 된다. 그리고 LayoutStore라는 틀만 사용해서 상태값을 만든다. Layout.jsx import React from 'react' import LayoutStore, { LayoutContext } from './LayoutContext' const Button = () => { const context = React.useContext(LayoutContext) retur..

import React from 'react' const reducer = (number, action) =>{ switch(action.type){ case 'UP': return number+1; case 'DOWN' : return number-1; default: return number; } } const Counter = () => { const [number, dispatch] = React.useReducer(reducer, 0) const onUP = () => { dispatch({ type: 'UP' }) } const onDown = () => { dispatch({ type: 'DOWN' }) } return ( {number} +1 -1 ) } export default Coun..

useReducer 상태관리 useState랑 비슷하다 상태를 변경하는 로직을 다른 곳에서 처리할 수 있다. 상태관리 할때 객체를 사용할 수 있어서 편리하다. Context Props 하위 컴포넌트에 보내는것이 까다로웠는데 이거를 편리하게 해준다 webpack5/component/counter 폴더 생성 * useReducer const [변수명,dispatch] = React.useReducer() const [number, dispatch] = React.useReducer(reducer,0) 구조 : 함수 number 라는 값을 바꾸기 위해서 dispatch를 써야한다 reducer를 쓸때는 컴포넌트 밖에다 놓자 dispatch는 setState 쓰듯이 쓰면 된다 dispatch({ }) dispa..

import React, { useState, useMemo, useCallback } from 'react' const Memo = () => { const [username, setUsername] = useState('') //React 가 빠진 이유는 위에 import 때문 const [list, setList] = useState([]) const change = (e) => { let { value } = { ...e.target } setUsername(value) } const submit = (e) => { e.preventDefault() const newList = [...list] newList.push(username) setList(newList) setUsername('') }..

useMemo 와 useCallback을 사용하는 이유는? /0712/vifo.html DP : 다이나믹 프로그래밍 - 어려운 알고리즘 중 하나라고 볼 수 있다. 코테 마지막 문제에서 자주 출제되고 그래프 + DP 로 출제가 된다. 그러면 DP가 뭐냐? - 규칙을 찾는거라고 보면 된다. * 피보나치 수열 문제 - 메모이제이션을 쓰는 이유 (최적화를 위해) 더보기 function fibo(n){ if(n == 1) return 1 if(n == 2) return 1 return fibo(n-2) + fibo(n-1) } 이렇게 쓰면 연산을 너무 많이 하게 된다. 개복잡함 - 그래서 이걸 메모제이션 으로 바꾸자 let memo = {} function fibo(n) { if (n in memo) { let ..

/class/example20.html {React.createElement(LoginBox)} 이 구문 자체를 JSX라고 한다 이렇게 하면 로그인 박스가 두번 실행된다 - 같은 구문 - Babel이 꺽쇄를 보고 해석해서 저 createElement로 바꿔주는거임 저 대괄호의 의미는 뭘까?? --> jsx에서 js 문법을 쓰겠다 빈 태그 혹은 특정태그가 들어가는 순간부터 넌적스 구문이 시작된다는 의미 그때부터는 넌적스로만 구문을 작성해야한다는 뜻이다. 근데 그 안에서 또 javascript로 실행시키고 싶으니 (js문법을 쓰고 싶으니) {} 대괄호를 쓴다 예 ) res.render('index',{ name : 'ingoo' }) 넌적스가 저 index를 읽어서 해석해서 하는거임 -- index.html..