Polpid's World

edX사이트에서 Introduction to ReactJS 강의를 들으면서 정리한 내용입니다. 2018/04/18 - [Development/React] - edX - Introduction to ReactJS Module1 내용정리 Class Components- Class ComponentClass Component 는 Functional Component 와 다르게 React Component 가 라이프사이클 메소드(Life Cycle method) 와 상태(state) 를 가질수 있도록 해준다. Class Component는 this.state, this.props 를 가지고 있다. 12345class Welcome extends React.Component{ render(){ return Hel..

edX사이트에서 Introduction to ReactJS 강의를 들으면서 내용을 정리해봤다. What is ReactJS?ReactJS 는 상태에 따라서 View 레이어를 만들어 주는 라이브러리이다.React Compnents는 Virtual DOM 을 생성한다. ReactCompnent의 상태가 변경되면 새로운 Virtual DOM을 생성하고 차이점을 분석한다. 그리고 효과적인 방법으로 HTML DOM 에 반영한다. Rendering Elements- React ElementsReact Elements 는 DOM 노드에 표현되는 Object 이다. JSX를 사용해서 syntax를 작성한다. React Elements와 React Components는 다르다. React Elements를 DOM 에 표..

React 에서 사용하는 map() 메소드는 파라미터를 전달하여 새로운 배열을 생성한다. 최근에 본 자바의 Stream 에서 map 의 기능하고 비슷해보인다. 아니 아마도 java가 functional 프로그래밍을 지원하려고 하면서 비슷하게 구현해놓은것 같다. 아래와 같은 contractData 라는 state를 저장해 놓는다. 123456789101112 constructor(props){ super(props); this.state={ contactData:[ {name:"Abet", phone:"010-0000-0001"}, {name:"Betty", phone:"010-0000-0002"}, {name:"Charlie", phone:"010-0000-0003"}, {name:"David", pho..

props 는 컴포넌트에서 사용할 데이터중 변하지 않는 데이터를 다룰때 사용한다. Parent 컴포넌트에서 child 컴포넌트로 데이터를 전달할 때 props를 사용한다. 컴포넌트의 render() 메소드 내부에 {this.props.propsName} 형태로 넣고 컴포넌트에서 사용할 때에는 안에 propsName='value' 형태로 값을 설정 한다. - render() 메소드 내부 12345678910111213class App extends React.Component { render(){ let text = "Hello HI"; return ( ); }}Colored by Color Scriptercs - 컴포넌트 1234ReactDOM.render( , rootElement);cs - Defau..

- React는 UI를 만들기 위한 라이브러리이다. framework 가 아니다. - React는 Virtual DOM 을 사용한다. 그래서 Virtual DOM의 전후 상태를 비교해서 변경된 부분만 새로 반영한다. - 현재 facebook 에서 라이브러리 관리를 하고 있어서 한동안 없어질 일은 없다. https://facebook.github.io/react/