LifeCycle API 란? LifeCycle API 는 React에서 생명주기이다 무슨 말이냐면 Component가 1. 나타날 때 2. 업데이트 될 때 3. 사라질 때 등 중간중간 과정에서 작업을 할 때 사용되기 때문이다. LifeCycle API 의 종류는 매우 많다 (사진 참고) LifeCycle API 종류 소개 (사진 참고) 1. Mounting : Component가 우리 브라우저 상에 나타날 때 2. Updating : Component의 Props가 바뀌거나 어떤 내용이 바뀌었을 때, 업데이트 될 때 3. Unmounting : Component가 우리 브라우저 상에서 사라질 때 4. LifeCycle API 소개 constructor 우리가 만든 함수가 처음 브라우저 상에 나타날 때 ..
CSS 적용 방법 (1) import React, { Component, Fragment } from "react"; class App extends Component { render() { const style = { backgroundColor : 'black', padding : '16px', color : 'white', fontSize : '36px' }; return ( 안녕하세요! ); } } export default App; CSS 적용 방법 (2) import React, { Component, Fragment } from "react"; import './App.css'; class App extends Component { render() { return 안녕하세요!; } } exp..
출력방법 1. - 단순 출력 import React, { Component, Fragment } from 'react'; class App extends Component { render() { const name = 'velopert'; return ( hello {name} ); } } hello velopert 출력방법 2. - 조건문 (1) import React, { Component, Fragment } from 'react'; class App extends Component { render() { return ( { 1 + 1 === 3 ? '맞다' : '틀리다!' } ); } } export default App; 틀리다! (참일 경우 ? 뒷 부분 출력, 거짓일 경우 : 뒷 부분 출력) ..
프론트엔드 라이브러리 종류 Angular TypeScript 기반 React Virtual DOM 지원 Vue Virtual Dom 지원, TypeScript 지원 * React 메뉴얼 : 우리는 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 만듦 * Virtual DOM : DOM의 구조만 간결히 흉내낸 자바스크립트 객체 React 시작하는 방법 import React, { Component } from 'react'; class App extends Component { render() { return ( 안녕하세요 리엑트 ); } } - 'react' : react 모듈을 불러와서 사용함 - import : import 를 사용하여 불러올 수 있음 - Component : react..
