리액트
[React 공부노트 #1] react의 구조
react의 구조 public public directory 내부의 index.html의 부분이 있다. react는 저 id가 root인 div 내부에 내용을 바꿔가면서 보여주는데 이것을 가상DOM (virtual DOM) 이라고 한다 index.js 가장 상위의 react 파일 실제 랜더링 되는 components를 import해서 사용한다 App.js 이 파일에서 개발에 사용하는 component를 import해준다 이때 import되는 GlobalStyles, Header와 같이 상위개념의 component를 가져온다 민들어둔 헤더를 import 하면 router 밖에 있기 때문에 항상 노출이 된다 여러개의 리턴을 위하여 flagment를 쓴다 router.js URL의 router가 바뀔떄다르게 ..
[생활코딩] 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 환경을 구축해 주는 명령어다 이렇게 기본으로 만들어 지는..