Front-End18 React Life Cycle API React Life Cycle API 컴포넌트가 브라우저에서 나타날때, 사라질때, 업데이트될때 호출되는 API contructor -> 컴포넌트 생성자 함수 componentDidMount -> 컴포넌트가 화면에 나타났을 때 호출 -> DOM 을 사용해야하는 외부 라이브러리 연동 -> 해당 컴포넌트에서 필요한 데이터를 요청 (Ajax 요청) -> DOM 의 속성 읽기, 변경작업 (스크롤 설정, 크기읽어오기..) componentWillReceiveProps (= UNSAFE_componentWillRecieveProps()) -> 컴포넌트가 새로운 props 를 받았을 때 호출 -> state가 props에 따라 변해야하는 로직 작성 -> 새로받을 props: nextProps -> 업데이트 전 prop.. 2022. 5. 1. React arrow fucntion 화살표 함수 const add2 = (x,y) => { x+y; } 화살표 함수에서는 함수 선언 대신, => 기호로 함수 선언한다. return할 식을 바로 적어주면 된다. 함수의 매개변수가 하나라면, ( ) 도 생략할 수 있다. 익명함수이다. 2022. 5. 1. React 이벤트 핸들링 이벤트 -> 유저가 웹 브라우저에서 DOM 요소들과 상호작용하는 것 onChange(): Form 요소는 값이 바뀔 때 실행 onMouseover(): 버튼에 마우스 커서 올렸을 때 onClick(): 클릭 input요소 여러개 이벤트 핸들링 -> 메소드를 여러 개 만듬 -> event 객체 활용 = e.target.name값 사용 (1) 이벤트에 실행할 Js코드가 아닌, 함수 형태의 값 전달 -> 화살표 함수 문법으로 함수를 만들어 바로 전달 -> render() 렌더링 외부에 미리 만들어서 전달 (2) DOM 요소에만 이벤트 설정가능 -> DOM 요소: div, button, input, form, span... -> 직접 만든 컴포넌트에 전달X = 이름이 onClick인 props를 전달하는 것 /.. 2022. 5. 1. [리액트를 다루는 기술] 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 다음