fashion_developer

React 누구든지 하는 리액트 컴포넌트...함수 vs 클래스 함수형에는 state, lifecycle이 빠져있다. 언제 사용해야하나...? 함수형은 초기 마운트 속도가 미세하게 빠르고 불필요한 기능이 없다. 단순히 어떤 값을 받아와서 보여주기만 하는 경우에는 함수형 컴포넌트를 만들자. 성능적으로 큰 차이는 없지만 만드는게 조금 더 간단하다는 점. defaultProps 부모 컴포넌트에서 값을 안받을 때 사용할 기본값을 설정할 때 사용. 클래스로 선언할 경우 static defaultProps를 안에 선언해주고 this.props.name 쓰면 된다. 함수형인 경우, FuncName.defaultProps = {} 를 밖에 선언해주면 된다. props, state props는 부모로 부터 전달받은 값, ..

React Context API import React, { Fragment } from 'react'; const UserContext = React.createContext('unknown')class App extends React.Component { render() { return ( 상단 메뉴 하단 메뉴 ) }} function Profile() { return ( )} function Greeting() { return ( { username => {`${username}님 안녕하세요`}} )} export default App; Provider, Consumer import React, { Fragment } from 'react'; const ThemeContext = React.crea..

React JSX를 알아보자 -ㅅ- - 예제 : 할 일 목록 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import React from 'react' class MyComponent extends React.Component { state = { desc: '', id: 0, todoList: [] } // 할 일 추가 todoAdd = () => { // id 증가 // 설명 입력 // 추가 let { desc, id, todoList } = this.state; id += 1 this.setState({ id }) todoList.p..

JavaScript 계산된 속성명 (Computed Property) function makeobj(key, value) { return { [key]: value } } console.log(makeobj("hello", "world")) // { hello: "world" } let i = 0; let obj = { ["val" + i++]: i, ["val" + i++]: i } console.log(obj) //{val0: 1, val1: 2} let param = "size" let config = { [param]: 12, ["moblie" + param.charAt(0).toUpperCase() + param.slice(1)]: 4 } console.log(config) // { "size"..

React 프로젝트 시작 (C:\react 디렉토리에서 실행했음) npm i create-react-app npx create-react-app hello-react cd hello-react npm start 리액트 라이브러리 (page 5) 1. 파일들을 C:\react\hello-world 에 저장https://unpkg.com/react@16.12.0/umd/react.development.jshttps://unpkg.com/react@16.12.0/umd/react.production.min.jshttps://unpkg.com/react-dom@16.12.0/umd/react-dom.development.jshttps://unpkg.com/react-dom@16.12.0/umd/react-dom..