한 주의 중반을 넘어선 목요일이다. 사실 늘 느끼는 부분이지만 목요일만 되면 여러가지로 피로해지는 것 같다. 하지만 조금만 더 하다보면 곧 주말이 오리라는 생각들에 참고 이겨낼 수 있는 힘이 생기는 것 같기도 하다. 오늘은 내가 작업할 페이지들의 뷰가 아직 디자이너분들로부터 전달되지 않았고 기능상으로도 좀 더 알아가야 할 부분들이 많다고 느꼈기에 개인적인 공부를 추가로 하는 시간을 가져보기로 했다.
React (생활코딩)
▶ 개발환경
public > index.html (메인페이지)
public디렉토리의 index.html는 웹 브라우저에 출력되고 div안에 Component가 들어감.
<div id="root"></div>
src > index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister(); `src디렉토리의 index.js는 Entry(진입)파일로 자바스크립트의 선택자처럼 id값이 'root'인 index.html파일의 root를 지정해줌.
그 외 사항 정리
node_modules: 라이브러리 모은 폴더
public: static 파일 보관함
src: 소스코드 보관함(실질적 코딩하는 곳)
package.json: 설치한 라이브러리 목록
class: 변수/함수 보관하는 덩어리
extends: 상속
props
props는 속성(attribute)을 가르키며 this.props.속성명을 이용, 리팩토링해서 코드를 간결화시키는 역할을 함.
State
State는 props의 값에 따른 구현에 필요한 내부의 데이터를 가리키며 내부의 값을 외부로 부터 은닉화시키는 역할을 함. 어떤 Component가 실행될 때 constructor함수가 있다면 render()함수보다 먼저 실행되어 초기화를 담당함.
- state는 constructor 안에 작성함
- constructor: class의 변수/초기값 저장할 때 사용
이벤트
이벤트는 props, State와 함께 애플리케이션을 리로드 하지않고 역동적으로 만들어줌.
function(e): 파라미터(매개변수)의 값으로 이벤트라는 객체를 주입해줌.
preventDefault()함수: e라고하는 객체에 속해 동작을 못하게 막음. (리로드 방지)
TypeError: Cannot read property 'state' of undefined
<header>
<h1><a href="/" onClick={function(e){
console.log(e);
e.preventDefault();
//this.state.mode = 'welcome'; -> 오류 발생
this.setState({
mode:'welcome'
});
}.bind(this)}>{this.state.subject.title}</a></h1>
{this.state.subject.sub}
</header>이벤트가 호출되었을 때 실행되는 함수 안에서는 this의 값이 component 자신의 값이 아닌 아무것도 셋팅되어 있지 않음.
▶해결법: 함수가 끝난 직후에 .bind(this)를 추가해주면 됨. this.setState라는 함수를 호출해서 인자로 바꾸고 싶은 mode를 안에 작성함.
