개인공부9 리액트 뽀개기 (4) 라이프 사이클을 알아보자. React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 리액트에서 제공하는 라이프 사이클인데 한글로 되어있으니 어렵지 않게 알아볼 수 있다. 찾아보면 render와 getDerivedStateFromProps는 마운트와 업데이트 모두에 속한다. 라이프 사이클의 함수들은 아래와 같다. (16.3 이상의 버전) //Life.js //마운트 constructor(props) {} static getDerivedStateFromProps(props, state){} componentDidMount(){} UNSAFE_compon.. 2020. 1. 2. 리액트 뽀개기 (3) state를 알아보자. state는 클래스에서만 사용이 가능하다 props와 비슷하지만 컴포넌트에 의해 완전히 제어되며 private속성이다. 일단 함수 컴포넌트에서 클래스 컴포넌트로 조금 수정을 했다. import React from 'react'; import logo from './logo.svg'; import './App.css'; import Clock from './Clock'; class App extends React.Component { render() { return ( ); } } export default App; 그리고 Clock이라는 컴포넌트를 만들었다. import React, { Component } from 'react'; class Clock extends Compone.. 2019. 12. 26. 즉시실행함수, Closure 자동으로 함수를 실행 즉시 실행 함수 표현(IIFE) 임 (function(){ //dosomething })(); 위와 같이 사용할 수 있다. 클로저 var outFoo = function(){ var x = 'access'; return function inFoo(){ return x; } } var foo = outfoo(); console.log(foo()); // access 안쪽에 있는 함수가 x를 바깥쪽 함수에 접근한다. 중첩된 함수는 외부 범위에서 선언한 변수에도 접근 가능하다. 2019. 12. 24. prototype 자바스크립트는 prototype 기반 언어라고 한다. 내가 공부한 것은 prototype을 통해 object 객체를 복사해서 새로운 객체를 생성하고 그 객체는 다른 어떤 객체의 원형이 되어 prototype으로 접근할 수 있다는 것이다. 일단 예를 들어보자 var Foo = function(){}; 위와 같이 Foo라는 새로운 object를 정의하면 동시에 Foo Prototype Object 생성된다. 그렇게 되면 여기서 new를 통해 생성된 객체는 Foo의 prototype을 사용할 수 있게 된다. var Foo = function(){}; var foo = new Foo(); 아래와 같은 결과를 확인할 수 있다 __proto__때문에 객체의 prototype과 연결되는 연결고리가 되어 사용할 수 있.. 2019. 12. 23. 이전 1 2 3 다음
