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 를 시작하면 된..
1. NODE.js 설치2. yarn 또는 npm 설치3. VSCODE 설치-> 확장 프로그램 설치 : ESLint(자바스크립트 문법을 체크) (필수)Relative Path(상대 경로에 있는 파일 경로를 편하게 작성할 수 있는 도구)Guides(들여쓰기 가이드라인을 그려 줌)Reactjs code snippets(리액트 관련 스니펫 모음) (제작자 Charalampos Karypidis) (필수)4. GIT 설치 ---------------------- 패키지 설치yarn global add create-react-app 또는 npm install -g create-react-app 입력 - create-react-app 설치create-react-app hello-react - 실행yarn start
