아무거나

React 해당 내용을 보기전 react기본 의 react-app-example-1 부터 선행하시면 좋습니다. React? React Component: 작업의 단위 Virtual DOM: Virtual DOM으로 그린다음에 변경 되기 전의 상황과 변경 된 후의 Virtual DOM의 State들을 비교해서 바뀐부분(=diff)만 추출해내서 그 부분만 다시 render를 해주는것이 react의 핵심이다. (State Change -> Compute Diff -> Re-render) JSX Javascript XML - JSX 자체는 문법 리액트에서는 JSX.Element로 그려질 Component를 표현한다. React.createElement 함수를 통해서도 JSX.Element 를 만들수 있다. [J..

Update와 Delete 업데이트 기능 구현 src/component/CreateContent.js를 복사하여 UpdateContent.js 로 생성한다. [UpdateContent.js] import React, { Component } from 'react'; class UpdateContent extends Component { render() { console.log('UpdateContent render') return ( Update ) } } export default UpdateContent; App.js에서 UpdateContent를 사용하기 위해서 mode에 Update관련 로직을 추가를 해준다. [App.js] import React, { Component } from 'react'..

Create 버튼 클릭시 저장 mode 변경 기능 이번 내용에서는 생성에 대한 부분을 만들것이다. 즉, Create 버튼을 클릭하면 Content의 목록에 새로운 값이 추가될것이다. App.js 코드를 아래와 같이 버튼을 추가하자. [App.js] ... return ( ... {/*추가*/} create update ); ... 위의 추가된 ul태그 안에 버튼들을 Component로 분리시켜보자. 먼저 src/components/Control.js 파일을 만들고 아래 내용을 추가하자. [Control.js] import React, { Component } from 'react'; class Control extends Component { render() { {/* 아래 ul태그는 App.js에서 선..

Event 이벤트 설치 아래 이미지에서 색칠된 제목인 modify title을 클릭했을 떄 PageHeader태그 바깥쪽에있는 App의 state를 바꾸는 작업을 시작하자. 우선 이해를 돕기 위하여 PageHeader의 Component를 풀어서 그걸 그대로 App에 도입하여 이벤트를 구현하자. PageHeader에서 아래 코드를 복사 ... {this.props.title} {this.props.subTitle} ... App.js에 1번의 복사한 코드를 아래와 같이 붙여넣고 PageHeader를 주석처리 한다. 그리고 props를 사용하는 부분을 state로 변경한다. ... render() { return ( {/**/} {this.state.header.title} {this.state.heade..

Component 두번째 state props는 사용자가 Component를 사용하는 입장에서 중요하며 state는 props의 값에 따라서 내부의 구현에 필요한 데이터들이 state이다. 즉, 사용하는 쪽(=props)과 구현하는 쪽(=state)을 격리시켜서 양쪽의 편의성을 각자 도모하는것이다. Props => Component(State) state 사용 [App.js] import React, { Component } from 'react'; import PageNav from './components/PageNav'; import PageHeader from './components/PageHeader'; import PageArticle from './components/PageArticle'..

컴포넌트 리액트의 필요성 설명하기전에 앞서 아래 시멘틱 태그가 정의된 html 코드를 참고하자. 시멘틱 태그: HTML5의 스펙이며 header, footer 태그와 같은 부분을 의미론적으로 적용할때 사용 public/ 경로에 example.html 라는 파일을 생성하여 코드를 아래와 같이 작성하자. WEB Page Hello HTML React Javascript WEB page 2 Hello Example. 만약 위의 태그별로 백만줄 또는 천만줄 이상이라고 생각해보자. 그러면 한 눈에 코드가 보이지 않기 마련이다. 그렇게 된다면 해당 줄이 긴 태그를 감추고 사용자 정의 태그로 나타낸다면 웹 페이지에서는 긴 태그가 모두 표시되겠지만 우리눈에는 사용자 정의 태그로 한 눈에 깔끔하게 보이게 될 것이다. (..

React 해당 샘플코드는 github에 제공되어 있습니다. 샘플코드 바로가기 React? facebook.com의 UI를 더 잘만들기 위해서 facebook에서 만든 javascript UI 라이브러리 공식 홈페이지 운영체제: 윈도우10 IDE: VS Code Component? 복잡한 코드를 사용자 정의 태그를 이용하여 편리하게 사용할 수 있다.(=component) 즉, 한번 정의해놓으면 여러곳에서 재사용할 수 있다. Component 장점 가독성 재사용성 유지보수 개발환경(CMD) NPM: Nodejs로 만들어진 프로그램을 쉽게 설치하게 해주는 일종의 앱스토어 https://nodejs.org/en/ 접속하여 설치한다. 설치여부 확인 // npm 설치여부 확인(버전 정보가 나오면 설치가 완료된것이..

vuejs에서 페이지를 라우팅 할 때마다 url에 # 기호가 생기는데 상당히 거슬리다. 이럴경우 아래와 같이 설정하면 해결된다. export default new Router({ mode: 'history', // mode값 추가 routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })

선택조건 낮은 Learning Curve 성능 안정적 큰 커뮤니티 또는 큰 단체에서 지원하며 문서화가 잘되어 있거나 레퍼런스 또한 많아야 한다. Vue 특징 낮은 Learning Curve 단순한 구성 요소 기존 자바스크립트 지식만으로 충분 컴포넌트 단위 관리 가능성 github 2017-06-30 현재 ( vuejs는 역사가 짧음에도 엄청난 성장을 보여주고 있다. ) Model-View 양방향 바인딩 지원 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법 Component-Based ( 단일 파일 Component -> 유지보수 용이하며 개발속도가 빠름 ) Virtual DOM 을 사용하여 빠른 렌더링 DOM의 복사본을 메모리 내에 저장하여 사용하며 변경 사항을 "가상의" 위치에서 처리하므로 "실제D..

아래와 같은 코드가 있다. 테스트1 테스트2 테스트3 function test.TestFunction(id, selectVal) { console.log('id: ' + id); console.log('selectVal: ' + selectVal); } 여기서 onChange기능에 test.testFunction 함수를 사용하여 선택한 select box의 값을 해당 함수의 매개변수로 전달하려고 한다. 그러기 위해선 this.value 함수를 사용하여 전달하면 된다.