js5 리액트 뽀개기 (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. 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. Argument 처리 형태 arguments 객체가 파라미터를 { key: value } 형태로 저장 function foo(){ return arguments }; console.log(foo(1,2,3)); // 0: 1 ,1: 2, 2: 3, length: 3 결과에서 보이듯이 배열의 형태를 하면서 array 형식으로 반환해준다. 이것은 정확이 배열이 아니며 array-like가 된다. 그렇기에 array의 내장 함수를 사용하지 못한다. 하지만 function foo(){ let newArr = Array.prototype.slice.call(arguments); return newArr; }; console.log(foo(1,2,3)); // (3) [1, 2, 3] 위와 같이 배열로 만들어 사용할 수도 있다. array-.. 2019. 12. 22. 호이스팅 함수 앞에서 함수를 호출하는 것을 호이 스팅이라고 한다. 함수 선언문은 초기화 단계에서 함수 오브젝트를 생성하기 때문에 어디에서도 호출할 수 있다. let foo = hoistingFn(); console.log(foo); // Hoisting function hoistingFn(){ return "Hoisting"; } 이것은 function과도 같은 것인데 처음에 선언문을 찾고 그것을 object화 시키며 등록한다 그다음 foo 변수를 초기화하고 마지막으로 실행 함수를 실행시킨다. 그렇기 때문에 오류 발생하지 않고 해석할 수 있는 것이다. let foo = hoistingFn(); console.log(foo); // Hoisting function hoistingFn(){ return "Hoisti.. 2019. 12. 20. 이전 1 2 다음
