Front-End/React.js15 [리액트를 다루는 기술] 7장. LifeCycle //LifeCycleSample.js import React, { Component } from 'react'; class LifeCycleSample extends Component { state = { number: 0, color: null, } myRef: null; //ref 를 설정할 부분 constructor(props){ super(props); console.log('constructor'); } static getDerivedStateFromProps(nextProps, prevState){ if(nextProps.color !== prevState.color){ //조건에 따라 값 동기화 return { color: nextProps.color }; } return null; //st.. 2022. 5. 1. [리액트를 다루는 기술] 3장. props, state //MyComponents.js 파일 import React, {Component} from 'react'; import PropTypes from 'prop-types'; //필수 props를 지정하거나, props 타입을 지정해야 할 때 사용한다. class MyComponent extends Component { static defaultProps = { name: '기본이름' } //name props 값을 지정하지 않았을 때, 기본 값으로 설정한다. static propTypes = { name: PropTypes.string, //name props 타입을 문자열로 설정한다. age: PropTypes.number.isRequired //age props 타입은 숫자이고, 필수로 있어야한다. .. 2022. 5. 1. [리액트를 다루는 기술] 1,2장. JSX import React, {Component} from 'react'; import './App.css' class App extends Component { render(){ const text = '당신은 어썸한가요?'; const condition = true; const style = { backgroundColor: 'gray', border: '1px solid black', height: Math.round(Math.random()*300)+50, width: Math.round(Math.random()*300)+50, WebkitTransition: 'all', MozTransition: 'all', msTransition: 'all' }; return( 리액트 안녕! {text} { co.. 2022. 5. 1. 이전 1 2 3 다음