새 context 만들기 import {createContext} from 'react'; const ColorContext=createContext({color:'black'}); export default ColorContext; consumer {value=>( )} provider 동적 Context 사용 import { createContext, useState } from "react"; const ColorContext = createContext({ state: { color: "black", subcolor: "red" }, actions: { setColor: () => {}, setSubcolor: () => {}, }, }); const ColorProvider = ({ childr..
promise 예제 function increase(number) { const promise = new Promise((resolve, rejecct) => { //resolve는 성공, reject는 실패 setTimeout(() => { const result = number + 10; if (result > 50) { //50보다 높으면 에러 발생시키기 const e = new Error("NumberTooBig"); return rejecct(e); } resolve(result); }, 1000); }); return promise; } increase(0) .then((number) => { //Promise에서 resolve된 값은 .then을 통해 받아 올 수 있음 console.log(..
immer를 사용하여 더 쉽게 불변성 유지하기 yarn add immer 기본 코드 import produce from 'immer'; cosnt nextState=produce(originalState,draft=>{ //바꾸고 싶은 값 바꾸기 draft.somewhere.deep.inside=5; }) //produce의 첫번째인자를 함수로 넣어도 돼 아래처럼 cosnt nextState=produce(draft=>{ //바꾸고 싶은 값 바꾸기 draft.somewhere.deep.inside=5; }) ex import React, { useRef, useCallback, useState } from "react"; import produce from "immer"; const App = () =>..
자동완성을 만들려면 jsconfig.json 파일생성을 해서 ctl+space를 눌르면 코드 생성. { "compilerOptions": { "target": "es6" } } flex 알고싶으면 추천 flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com yarn add react-icons react 아이콘 react-icons.github.io/react-icons/#/icons/md React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports t..
컴포넌트 스타일링 1. CSS selector ex) .app .logo{~~} 2. Sass yarn add node-sass $으로 변수, @mixin으로 함수, @include로 함수사용, &.으로 함께 사용 됐을 때 utils.scss //변수 사용하기 $red: #fa5252; $orange: #fd7e14; $yellow: #fcc419; $green: #40c057; $blue: #339af0; $indigo: #5c7cfa; $violet: #7950f2; //믹스인 만들기(재사용되는 스타일 블록을 함수처럼 사용할 수 있음) @mixin square($size) { $calculated: 32px * $size; width: $calculated; height: $calculated; } ..
useState const [name, setName] = useState(""); useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. componentdidmount useEffect(() => { console.log("componentdidmount"); }, []); 특정 값 업데이트 useEffect(() => { console.log(name); }, [name]); 뒷정리하기 (언마운트되기 전이나 업데이트 직전에 작업 수행) useEffect(() => { console.log("effect"); console.log(name); return () => { console.log("cleanup"); console.log(name); }; ..
const MyComponent = ({ name, favoriteNumber, children }) => { children은 여기서 리액트 리액트 props가 없을때 defaul MyComponent.defaultProps = { name: "기본 이름", }; yarn add prop-types 타입확인 isRequired 쓰면 prop이 제공되지 않을때 경고 MyComponent.propTypes = { name: propTypes.string, favoriteNumber: propTypes.number.isRequired, }; 이벤트 import React, { useState } from "react"; const EventPractice = () => { const [form, setFor..