![]()
환경버전 node : 12.4.0 yarn : 1.16.0 Visual Studio Code : 1.35.1 브라우저 : 크롬 / 버전 75.0.3770.100(공식 빌드) (64비트) 초기생성 PS C:\Users\kcom\Documents\TEST1> npx create-react-app daily warning ..\..\..\package.json: No license field [1/4] Resolving packages... warning react-scripts > fsevents@2.0.6: Please update: there are crash fixes [2/4] Fetching packages... info fsevents@1.2.9: The platform "win32" is inc..
CSS, Sass, CSS Module, styled-components create-react-app styling-react yarn add node-sass yarn eject config/webpack.config.js 수정전 { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'sass-loader' ), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // R..
![]()
마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것 constructor : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 동기화하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 업데이트 : 아래 4개 일경우 메서드를 호출한다. 1) props 가 바뀔때 2) state 가 바뀔 때 3) 부모 컴포넌트가 리렌더링될때 4) this.forceUpdate로 강제로 렌더링을 트리거할 때 getDerivedStateFromProps : 위와동일 shouldComponenUpdate : 컴포넌트가 리렌더링을 ..
![]()
이벤트 리액트 메뉴얼 : https://reactjs.org/docs/events.html SyntheticEvent – React A JavaScript library for building user interfaces reactjs.org MyComponent.js - onChange 이벤트 + onKeyPress 이벤트 + onClick 이벤트 import React, { Component } from 'react'; class EventPractice extends Component { state = { username: '', message: '' } handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }); } han..
![]()
리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러 가지 컴포넌트로 구성되어 있다. MyComponent.js [임의로 만든 파일] import React, { Component } from 'react' class MyComponent extends Component { render() { return ( 컴포넌트 초기 코드 작성 ) } } export default MyComponent; App.js import React from 'react'; import MyComponent from './MyComponent'; function App() { return ( ); } export default App; 이제 해당폴더에가서 yarn start 를 시작하면 된..
