[React-10]Lifting State Up으로 양방향 통신하기

JavaScript와 HTML,CSS등에 대해서는 일체 다루지 않는다.

기초 지식은 다른 강의를 참조하도록 하라.

이 강의는 React의 사용법 위주로 작성되어 있다.

왜 React여야는지, React를 써야하는지에 대하지는 논하지 않으므로 그런 자료는 다른 데이터를 참조하라.

참조:

react docs 

기본적으로 React같은 frontend framework에서는 양방향 바인딩을 지원하지 않는다.

다만 양방향을 흉내낼수 있게 단방향을 양쪽으로 지원할 뿐이다.

그래서 아래에서 이야기할 양방향이라는 것은 단방향을 양쪽으로 하는것임을 미리 알아주길 바란다.

여러분은 이 때까지 props를 이용해서 부모가 자식에게 영향을 줄 수 있다는걸 알 수 있다.

그런데 반대로 자식이 부모에게 영향을 줄 수 있느냐라고 물으면 가능하다고 할 수 있다.

다만 정말 깔끔하지 못한 방법을 사용한다. 이를 Lifting State Up이라고 부른다.

줄여서 보통 리프트 업이라고 부르는 편인데 어떻게 구현하는지 보도록 하자.

// App.js
import React, {Component} from 'react';
import Hello from './Hello'

class App extends Component {
    state = {
        name: 'kukaro'
    };

    getName(data) {
        this.setState({
            name: data
        });
    }

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="App">
                <Hello name={this.state.name} getName={this.getName.bind(this)}/>
            </div>
        );
    }
}

export default App;

코드의 전문이다.

눈에 띄는 점을 몇개 골라보자.

getName(data) {
    this.setState({
        name: data
    });
}

getName은 인자로 data를 받아서 이것을 name에 넣어주는 역활을 한다.

아주 기초적인 역활임을 쉽게 알 수 있다.

<Hello name={this.state.name} getName={this.getName.bind(this)}/>

다만 여기서 보면 신기한게 있는데 getName을 props인자로 던졌다.

즉 함수자체를 인자로 던진것이다.

그러면 이제 Hello를 보도록하자.

// Hello.js
import React, {Component} from 'react'

class Hello extends Component {
    onMyClick = ()=> {
        this.props.getName(this.props.name + '!');
    }

    render() {
        return (
            <div className="Hello" onClick={this.onMyClick}> hello {this.props.name}!
            </div>
        );
    }
}

export default Hello;

보면 알겠지만 신기하게 만들어진걸 알 수 있다.

우리는 Hello라는 div를 클릭할 때마다 onMyClick이 호출된다.

그런데 잘보면 props로 넘긴 함수에 현재 값에 !를 추가한 값이 전달된다.

getName(data) {
    this.setState({
        name: data
    });
}

다시 넘어와서 App.js의 getName을 보자.

data가 넘어오면 state의 값을 data로 덮어쓰게 되어있다.

이제 여러분들은 이게 어떻게 동작하는지를 알 수 있을 것이다.

부모가 자식에게 함수를 하나 하달해주고 자식은 그 하달한 함수를 통해서 바뀐값을 전달한다.

그러면 부모측에서의 함수가 호출되고 부모에서는 값이 바뀌게 된다.

이게 바로 Lifting State Up이라는 방식이다.

하지만 이 방식은 치명적인 문제점이 있다.

그런데 다음 리액트 강의에서 언급하도록 하겠다.