아무거나

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 설치여부 확인(버전 정보가 나오면 설치가 완료된것이..