React

출처 : https://velopert.com/node-js-tutorials

- React

> virual DOM 사용

> Server side Rendering

> 컴포넌트 및 컴포넌트 라이프 사이클
    http://webframeworks.kr/tutorials/react/components-and-lifecycle/

> React 컴포넌트 클래스는 대문자로만 작성해야 하면, 소문자로 시작하는 컴포넌트 이름은 모두 HTML element로 간주

> View Only

> IE8 이하 지원 안함

- jsx 

> Nested Element : 컴포넌트에서 여러 Element를 렌더링할 때 container element 안에 포함 시켜야 함( <div></div> 라도 감쌓아야 함 )

> JavaScript Expression

JSX안에서 JavaScript를 사용할 때는 {}로 wrapping 해야 함

If Else문은 JSX에서 사용불가 -> 삼항식 ( Condition ? true : false) 이용

> Inline Style

Style 설정시 String을 사용하지 않고 key가 CamelCase인 객체를 사용

> Comments

JSX 안에 주석을 사용할 경우

{/* ... */}

class Codelab extends React.Component{
    render(){
        let text = "Hello asdfasdf";
        let st = {
            backgroundColor: 'aqua'
        }
        return(
            <div style = {st}> {text} </div>
        )
    }
}
 
class App extends React.Component{
    render(){
        return(
            <Codelab/>
        )
    }
}

- props

> 컴포넌트 내부의 Immutable Data()

> JSX 내부에 {this.props.propsName}

> 컴포넌트를 사용할 때, <>안에 

propsName = "value"

> this.props.children은 기본적으로 갖고 있는 props로서

<Cpnt> 여기에 있는 값이 들어감 </Cpnt>

class Codelab extends React.Component{
    render(){        return(
            <div>
                <h1>Hello {this.props.name}</h1>
                <div>{this.props.children}</div>
            </div>
        )
    }
}
class App2 extends React.Component{
    render(){
        return(
            <Codelab name= {this.props.name}> {this.props.children} </Codelab>
        )
    }
}
// Now we can render our application into it
ReactDOM.render(<App2 name = "parent"> child </App2>, document.getElementById('root'))

> 기본값 설정

Component 선언이 끝난다음 Component.defaultProps = {}

> 타입 검증

Component.propTypes = {}

=> 하지 마라 

"React.PropTypes is deprecated as of React v15.5. Please use the prop-types library instead."

Codelab.defaultProps = {
    name : 'Unknown'
};

- state

> 유동적인 데이터

> JSX 내부에 {this.state.stateName}

> 초기값 설정이 필수, 생성자에서 this.state = {}로 설정

> 값을 수정할 때는 this.setState({...}),

렌더링 된 다음 this.state = 사용 안됨

(setState()에서는 안정적인 프로세스를 밟아서 적용됨)

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 0
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState({
            value: this.state.value + 1
        });
    } 
    render() {
        return (
            <div>
                <h2>{this.state.value}</h2>
                <button
                    onClick={this.handleClick}>
                    {/*onClick = {this.handleClick.bind(this)}>*/}
                    Press Me
                </button>
            </div>
        );
    }
}

> JavaScript component에서 이미 method를 실행할 때는 this를 알 수 없음

=> bind

> onClick에 함수를 할당하면서 ()괄호를 넣게 되면 render 할때 마다 함수를 호출하여서 문제가 생기므로 주의 해야 함 (이 경우 setState 하면서 화면을 다시 그리면서 render를 호출 하게 되므로 함수 스택 오버 플로우가 생길 수 있다.)

- map(iterator)

컴포넌트 매핑

- concat(list 원소 추가, 합침)

배열의 내장 함수 push를 사용하면 배열 자체를 변경하기 때문에 사용안함

값을 추가하고 그 값을 배열의 새값으로( 배열을 만들어서) 반환

- splice(list 원소 제거)

- immutability helper(list 효율적으로 추가, 제거)

https://www.npmjs.com/package/immutability-helper

* 참고 : https://medium.com/@ljs0705/react-state가-불변이어야-하는-이유-ec2bf09c1021

npm install --save react-addons-update

syntax는 몽고db 쿼리 언어를 비슷하게 사용

- component life cycle

> constructor : 생성자, state 정할 수 있음

> componentWillMount : DOM위에 만들어지기 전에 실행

> render : 컴포넌트 렌더링을 담당

> componentDidMount : 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드

이 안에서 다른 JavaScript 프레임워크를 연동하거나 setTimeout, setInterval 및 AJAX처리 등을 넣음

> componentWillReceiveProps : 컴포넌트가 prop을 새로 받았을 때 실행

prop에 따라 state를 업데이트 해야 할 때 사용하면 유용

> shouldComponentUpdate : prop 혹은 state가 변경되었을 때, 리 렌더링을 할지 말지 정하는 메소드, 필요한 비교를 하고 값을 반환하도록 해야 한다.

(true 이면 다시 그리고 false이면 안그린다.)

return nextProps.id !== this.props.id; JSON.stringfy()를 쓰면 field를 편하게 비교 할 수 있음.

> componentWillUpdate : 컴포넌트가 업데이트 되기 전에 실행된다.

이 메소드 안에서는 this.setState()를 사용하지 말아야 한다.

> componentDidUpdate : 컴포넌트가 리렌더링을 마친 후 실행

> componentWillUnmount : 컴포넌트가 DOM에서 사라진 후 실행되는 메소드

- ref(reference)

> DOM요소에 이름을 달아줌

> id와 비슷하지만 DOM요소에도 사용하고 컴포넌트에도 사용할 수 있으며, 해당 컴포넌트가 가지고 있는 메소드 및 변수들을 사용할 수 있음

> 편리하지만 남용은 지양

> 콜백함수 사용하기

class Hello extends React.Component{
    render() {
        console.log("Render");
        return(
            <div>
                <input ref={ref=>this.input = ref}>
                </input>
            </div>
        )
    }    
    componentDidMount(){
        console.log("componentDidMount");
        this.input.value = "I used ref to do this.";
    }
}

class MainRender extends React.Component{
    render(){
        return (
            <Hello/>
        )
    }
}

* {} 안에 함수를 넣어서 ref를 설정

* arrow function이 사용됨

- 함수형 컴포넌트

- 참고

* state를 따로 생성자 없이 표현 ( Stage-0 )

* 전개 연산자(spread operator)

함수든 json이든 전체를 나타냄

slice로 일부분만 표현 가능하고 삭제 수정 가능

새로운 문법이라 들어있않고 설치해야 함

npm install --save babel-preset-stage-0

webpack.config.js에 추가 시켜야 함(electron은 .babelrc에 preset 추가)

* 람다 함수(이름없는 함수, 동적 함수)를 선언하여 멤버로 넣어둘경우

=> babel plugin 설정 필요

https://babeljs.io/docs/plugins/

- localstorage : HTML5의 로컬 스토리지를 이용하여 데이터를 저장하고 불러올 수 있다.

문자열 데이터만 저장 가능하므로 json을 이용해야 한다.

- import, export, default

- react-router : 페이지 별로 주소 나누기

(v4는 react-router-dom 필요)

- code spliting

- server side rendering

검색 엔진 최적

성능 개선

프로젝트 복잡도

성능 악화 가능성