전체 글
-
[생활코딩] 이벤트에서 state 변경하기 / bind함수 / setState함수REACT 2022. 1. 31. 21:14
생활코딩 https://www.youtube.com/watch?v=h7GdhY_m8nM&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=21 import React,{Component} from 'react'; import TOC from "./components/TOC"; import Content from './components/Content'; import Subject from './components/Subject'; import './App.css'; class App extends Component{ constructor(props){ super(props); this.state={ mode:'read', subject:{title:'WEB',sub:'wo..
-
[생활코딩] 이벤트 설치REACT 2022. 1. 31. 20:07
생활코딩 https://www.youtube.com/watch?v=3h7MidkDTBU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=20 * 링크걸기 import React,{Component} from 'react'; class Subject extends Component{ render(){ //class 안에 함수는 function을 생략할 수 있다. console.log('subject render'); return ( {this.props.title} {this.props.sub} ); } } export default Subject; * react와 같은 application 을 사용할 때 reload를 하지 않아도 역동적인 사이트를 만들 수 있다는 장점이..
-
[생활코딩] 이벤트 state props 그리고 render 함수REACT 2022. 1. 31. 17:10
생활코딩 https://www.youtube.com/watch?v=kviidk347nU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi state 세팅하기 현재 보고있는 페이지가 welcome page인지 read page인지 구분하기 위해 state에 mode 값을 준다. (기본값은 welcome) mode:'welcome', 그리고 welcome mode 일 때 content 영역에 표시할 text도 지정한다. welcome:{title:'Welcome',desc:'Hello, React!!'}, react에서는 state 값이 바뀌면 그 state를 가지고 있는 component 에 render 함수가 다시 호출된다. 그러면 그 render 함수 하위에 있는 여러 compon..
-
[생활코딩] keyREACT 2022. 1. 31. 14:00
생활코딩 https://www.youtube.com/watch?v=sAFNZuzFEPo state를 더 사용해보자. 이전에 사용했던 state는 subject라고 하는 property에 값이 하나였는데, 여러개의 값을 다룰 때는 방법이 달라진다. TOC 안에있는 데이터를 App의 내부 state를 TOC에 주입함으로써 데이터가 자동으로 바뀌게 할 것이다. contents라는 property를 state에 추가한다. constructor(props){ super(props); this.state={ subject:{title:'WEB',sub:'world wide web!!'}, contents:[ {id:1, title:'HTML', desc:'HTML is HyperText ...'}, {id:2, t..
-
[생활코딩] state 소개REACT 2022. 1. 31. 13:29
생활코딩 https://www.youtube.com/watch?v=rOpg2KUPW2M&t=29s https://www.youtube.com/watch?v=e2c1EUcW7oo App이라고 하는 Component에 Subject라고 하는 하위 Component가 있다. 하위 Component에 props의 값들이 하드코딩 되어 있다. import React,{Component} from 'react'; import TOC from "./components/TOC"; import Content from './components/Content'; import Subject from './components/Subject'; import './App.css'; class App extends Component..
-
[생활코딩]react component 파일로 분리하기REACT 2022. 1. 31. 12:40
실습 시작 전 chrome react developer tools를 다운받자 src 폴더 안에 components 폴더를 생성한다. components 폴더 안에 TOC.js 파일을 생성한다. TOC.js 에 다음 코드를 작성한다. 첫 번째 줄에 import 부분은 'react 라이브러리에서 Component 라고 하는 클래스를 로딩한다' 라는 뜻이다. 마지막 줄은 'TOC 라는 클래스를 외부에서 사용할 것을 허용하는 코드' 이다. import React, {Component } from 'react'; class TOC extends Component{ render(){ return( HTML CSS JavaScript ); } } export default TOC; 그리고 App.js 에 TOC 클래..
-
[생활코딩] REACT 시작하기(환경설정, 배포)REACT 2022. 1. 31. 00:02
node --version npm -v npm install -g create-react-app : 한 번 다운로드를 받고 이후 추가적인 다운로드가 필요없다. 최신버전을 사용하지 못할 수 있다. npx create-react-app : 항상 최신버전의 react를 사용할 수 있다. 매번 새롭게 다운로드 받아야 한다.( 다운로드 이후 삭제되기 때문에 용량차지X) 개발을 원하는 폴더에 create-react-app . (npx create-react-app 만들폴더이름) 개발을 원하는 폴더로 vscode 를 연 후 npm run start 기본적으로 index.html 에 id="root" 인 태그 안에 react를 통해 만든 태그들이 들어간다. (src 폴더안에 있는 파일들을 이용해서 수정) *react ..