Joon's Space

리액트에서 event 함수를 만들 때, state 값을 바꾸어 주려면, 밑의 코드와 같이 바꾸어주면, 오류가 나게 된다. render함수 안에서 this는 component 자신을 가리키지만, event function 안에서는 this 값이 undefined 하게 되기 때문. {this.state.subject.title} {this.state.subject.sub} import React, { Component } from 'react'; import Subject from "./components/Subject"; import Content from "./components/Contents"; import TOC from "./components/TOC"; import './App.css'; cla..

1. Component 1.1 Component를 사용하는 이유? -> 리액트는 HTML 태그 구조를 각 Component 로 분리하는데, 이렇게 하면 중복 코드들을 최소화시키고, 유지보수도 용이하게 해 준다. (객체지향 언어의 특징) WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 다음과 같은 pure.html 을 react에서 HTML semantic 태그들 (header, nav, article, etc)을 각 class Component로 App.js 에 생성해준다. 1.2 Component 기본 생성법 (기본 구조) class Hello extends Component { render() { retur..

1. Node.js 설치 (npm 사용하기 위함) nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js 웹사이트에 들어가서 최신이나 최적화된 파일을 다운로드한다. 2. npm install -g create-react-app 을 이용해서 create-react-app을 설치 ※ 에러가 뜬다면 명령어 앞에 sudo를 붙어 다시 실행시켜본다. 3. 개발을 진행할 디렉토리를 하나 만들어 그곳에 react 파일을 생성한다. - 터미널에서 cd 명령어를 이용하여 생성한 디렉터리 위치로 이동한다. ( ex. cd Users/hyojun/Desktop/react-ap..