생활코딩
[생활코딩] 5# 리액트 공부
state 와 props 의 차이점 Props Read only 이다 수정할수 없다 따라서 컴포넌트 내부에서 변경하려한면 에러가 뜬다 render(){ this.props.title = "hi"//error return( {this.props.title} {this.props.desc} ) } CRUD CRUD 를 위한 버튼들을 만들어 주도록 하자 carete update Delete 의 경우는 link 의 개념으로 잡는데아닌 오퍼레이션의 기능을 하는 버튼을 만들어야 한다 위의 컨트롤 부분 소스를 다른 컴포넌트 js 파일로 분리 시키자 import React,{ Component } from 'react'; import logo from './logo.svg'; import TOC from "./comp..
[생활코딩] 4# 리액트 공부
컴포넌트 이벤트 이번에는 컨텐츠를 누르면 그 컨텐츠에 해당하는 정보를 읽을수 있도록 만들어준다 constructor(props){//랜더하기전에 초기화 해주고 싶은코드는 constructor 안에 써야한다. super(props); this.state = { mode:"read", selected_content_id :2, subject:{title : 'WEB', sub : 'world wide web'}, welcome: {title: 'welcome',desc: 'welcome react'}, contents :[ {id : 1, title : 'HTML', desc : 'HTML is for ...'}, {id : 2, title : 'CSS', desc : 'CSS is for ...'}, {i..
[생활코딩] 3# 리액트 공부
바인드 엮는다 묶어준다는 뜻 바인드를 쓸때 render 라는 함수가 호출될때 this 는 컴포넌트 자신을 가리킨다. render(){ var _title, _desc = null; if (this.state.mode === "welcome") { _title = this.state.welcome.title; _desc = this.state.welcome.desc; } else if (this.state.mode === "read") { _title = this.state.contents[0].title; _desc = this.state.contents[0].desc; } return ( {/* */} {this.state.subject.title} {this.state.subject.sub} ); }..
[생활코딩] 2# 리액트 공부
component 파일 나누기 import React,{ Component } from 'react'; 와 같이 component 를 로드한다음 extends class TOC extends Component{ render(){ return( HTML CSS JavaScript ) } } export default TOC; 해야한다 그후 export default TOC; 로 내보내 준다라고 알려줘야함 Props 와 state Props 사용자에게 중요한거고 프롭스에게 밸류를 줘서 조작할수있다 state 로직을 구현하기 위한것 내부적으로 존재하고 외부에 나타나면 안된다. 좋은 컴포넌트를 만들어 주기 위해서2개를 각각 철저하게 분리해줘야한다. constructor(props){//랜더하기전에 초기화 해주고..
[생활코딩] 1# 리액트 공부
개발환경 구축 하기 생활코딩 3 https://ko.reactjs.org/docs/getting-started.html Create a New React App 툴체인 이라는게 있는데 툴체인이란 웹개발을 할때 필요한 것들을 모아놓은 것들 Create a New React App https://github.com/facebook/create-react-app npm install -g create-react-app@2.1.8 react 를 설치해 준다 여기서 npx 는 1회용으로 다운로드 한뒤에 실행하고 삭제하는 명령어이다. create-react-app [폴더명] 를 쳤을 때 project 가 나오면 제대로 설치가 된것이다. 이 명령어는 react 환경을 구축해 주는 명령어다 이렇게 기본으로 만들어 지는..