program_language 및 궁금한것/ReactJS
-
[React] LifeCycle APIprogram_language 및 궁금한것/ReactJS 2019. 10. 16. 18:56
- 라이프 사이클 API 컴포넌트가 나타날때(Mounting), 업데이트(Updating) 될때, 사라질때(Unmounting) constructor - 생성자 함수, 브라우저에 보여질때 가장 먼저 실행되는 함수 (state설정, 미리 해야할 작업들) getDerivedStateFromProps - props로 받은 값을 state로 동기화 시키고 싶을 때 사용함 - shouldComponentUpdate ** - 용도는 버츄얼돔에 랜더링 할지말지 결정하는 함수이다. - 원래 부모가 리렌더링되면 자식들도 실행되게 되어 있다. - virtual DOM은 실제 업데이트 된것만 바뀌기 때문에 랜더랑 과정이 빠르다. - virtual DOM에 그리는 성능 조차 아끼고 싶을때 사용한다. DOM이 몇백개 몇천개일때..
-
[React] ES6문법을 ES5문법으로 확인해보자program_language 및 궁금한것/ReactJS 2019. 10. 13. 13:34
ES6문법을 ES5문법으로 변환해 주는 사이트가 있다. ES6문법이 let one=a=>console.log(a); ES5문법으로 변환 var one = function one(a) { return console.log(a); }; let two=(a,b)=>console.log(a,b); var two = function two(a, b) { return console.log(a, b); }; let three = (c,d) =>{ console.log(c); console.log(d); } var three = function three(c, d) { console.log(c); console.log(d); }; 평소에 사용했던 JavaScript가 ES5문법이었던 것이다..
-
[React] 버튼 클릭 시마다 1 증가 기능program_language 및 궁금한것/ReactJS 2019. 10. 13. 13:01
태그 선언후 아래 코드를 작성해 준다. class Counter extends React.Component{ constructor(props){ super(props); this.state={ value:0 }; this.handleClick=this.handleClick.bind(this); } handleClick(){ this.setState({ value:this.state.value+1 }); } render(){ return( {this.state.value} Press Me ) } } class App extends React.Component { render() { return ( ); } }; ReactDOM.render( , document.getElementById("root") );..
-
[React] JSX와 React 초기 사용 방법program_language 및 궁금한것/ReactJS 2019. 10. 12. 20:58
1. 코드펜 접속 2. 설정 - JavaScript Preprocessor - Bable(ES6로 작성된 코드를 ES5로 변환을 해준다.)선택 react (컴포넌트 담당)와 react-dom 추가 ( 리엑트 15버젼 이상부터는 이 두개를 추가) * 브라우저의 호환성 때문에 변환하는 것이다. 3. 클래스를 선언 후에 사용해야 한다. 4. 상속사용가능 (부모 호출시에는 super. 을 써준다.) JSX - html같지만 자바스크립트로 작성된다. - xml같은 문법을 native JavaScript 문법으로 변환해준다. - 모든 JSX 코드는 container element(태그)안에 포함되어야 한다. (왜? 에러발생) - let(블록범위) == var(함수단위) 와 비슷하다. 한번선언시 재선언 불가능 - l..
-
[React] 리엑트란?program_language 및 궁금한것/ReactJS 2019. 10. 12. 19:55
요즘 React라는 단어가 귀에 많이 들어온다. 왜 일까? 강의를 보며 개념을 정리해 보았다 We built React to solve one problem: building large applications with data that changes over time. React - JavaScript 어플리케이션을 구조화 하려고 사용하는 라이브러리이다. - 프레임 워크가 아닌 라이브러리 이다. - 리엑트는 user interface를 만들기 위한 것이다. 이게 전부 - 가볍다. - 리엑트와 엥귤라는 비교 대상이 아니다. 엥귤라는 프레임 워크니깐. - Virtual DOM사용 - 배우기 간단하다 - 뛰어난 GC(Garbage Collection) - 서버사이드 & 클라이언트 렌더링 둘을 지원한다. - 서..