[생활코딩] React

React 컴포넌트

• "독립적인 기능을 수행하는 단위 모듈"
• 효과
  1. 가독성
  2. 재사용성
  3. 유지보수 용이

→ UI를 구성하기 위해서는 화면에 컴포넌트를 그리고(mounting), 갱신하고(updating), 지워야(unmounting) 한다. 컴포넌트는 각 프로세스가 진행될 때에 따라 Lifecycle 함수가 실행되므로 개발자는 이를 재정의하여 컴포넌트를 제어하게 된다. 

 

컴포넌트의 속성

• props
  • 부모 컴포넌트가 자식 컴포넌트에게 주는 값 (값을 컴포넌트에 전달해줘야 할 때 사용)
  • 컴포넌트의 mounting, updating 시점에 값이 할당될 뿐, 컴포넌트 내부에서 값을 변경할 수 없다.
• state
  • 컴포넌트 내부에서 선언, 내부에서 값을 변경할 수 있다. 
  • 상황에 따라 변경되어야 하는 값을 정의한다. (동적인 데이터)

컴포넌트의 종류

• 함수형 컴포넌트 
• 클래스형 컴포넌트 

 

constructor 함수

import React, {Component} from "react";
import Subject from './component/Subject';

class App extends Component {
	constructor(props) {
    	super(props);
        this.state = {
        	subject: {title:"WEB", sub:"world wide web"},
        };
    }
    
    render() {
    	return (
        	...
            <Subject 
            	title={this.state.subject.title}
            	sub={this.state.subject.sub}
            ></Subject>
            ...
        );
    }
}

• 해당 컴포넌트 실행 시 render 함수보다 먼저 실행되고, 컴포넌트를 초기화할 때 constructor 함수를 사용한다.
• 상위 컴포넌트의 state는 하위 컴포넌트의 props로 전달된다. 
• props/state 값이 바뀌면, props/state 값을 갖고 있는 컴포넌트의 render 함수가 다시 호출된다. + render 함수 하위에 있는 컴포넌트의 render 함수들도 전부 다시 호출된다. (화면이 다시 그려짐) 

 

event 

class App extends Component {
	...
    return (
    	<div className='App'>
        	<header>
            	<a href='/' onClick={function(e) {
                	console.log(e);
                    e.preventDefault();
                    // this.state.mode = 'welcome'
                    this.setState({
                    	mode: 'welcome'
                    });
                }.bind(this)}> ... </a>
            </header>
        </div>
    );
}

• e.preventDefault(): event가 발생한 태그의 기본적인 동작을 막아줌 (화면 rerender..)
• setState: state 값을 바꿀 때 사용하는 함수 
• bind(this): event 호출 시 실행되는 함수는 this 값은 undefinded 이므로, 이벤트 함수가 끝난 직후에 bind(this)를 추가해야 함.

bind 함수

var obj = {name: 'egoing'};

function bindTest() {
	console.log(this.name);
}

bindTest2 = bindTest.bind(obj);
bindTest2();
>> egoing

 

이벤트 만들기 

#1

// App.js
return (
	...
    <Subject
        title={this.state.subject.title}
        sub={this.state.subject.sub}
    	onChangePage={function() {
        	this.setState({mode:'welcome'});
        }.bind(this)}
	></Subject>
    ...
);

// Subject.js
return (
	...
    <a href='/' onClick={function(e){
    	e.preventDefault();
        this.props.onChangePage(); // App에서 정의한 event
    }.bind(this)}> {this.props.title} </a>
    ...
);

 

#2

// App.js
return (
	...
    <TOC
    	data={this.state.contents}
        onChangePage={function(id) {
        	this.setState({ mode:'read', selected_content_id: Number(id)})
        }.bind(this)}
    ></TOC>
    ...
);

// TOC.js

 

$("a").click(function(event) {
	console.log(event.target.id); // event가 발생한 대상 id 출력
});

event.target:현재 event가 발생한 요소의 속성들을 얻을 수 있다.