[220414] 리스트의 단점을 극복하는 상태 끌어올리기

리스트의 단점

리스트에서 props는 부모->자식 간에 데이터를 전달이 가능하게 해주지만,

동일선상에 있는 관계에서는 데이터를 넘겨줄 수 없다.

 

해결책 : 상태 끌어올리기

부모컨텐츠에 App component에 state를 만들어서 전달해준다.

리액트 사이트에서 설명하는 상태 끌어올리기 : https://ko.reactjs.org/tutorial/tutorial.html#lifting-state-up

 

 

 

---

 

 

App에 state값을 저장하기

 

코드를 실행시키면, Form 컴포넌트에 있는 state가 아닌, App 컴포넌트에 있는 state가 변화된걸 볼 수 있다.

class Form extends React.Component{
    state ={
        value:'',
    }

    handleChange = e => {
        const {target:{value}} = e
        this.props.change(value) //부모에게서 끌어온 함수를 사용함
    }

    handleSubmit = e => {
        e.preventDefault()
    }

    render(){
        const {
            props:{
                value
            },
            handleChange,
            handleSubmit
        } = this

        return(
            <form onSubmit={handleSubmit}>
                내용 : <input type="text" value={value} onChange={handleChange} />
                <input type="submit" value="확인" />
                <h3>{value}</h3>
            </form>
        )
    }
}

class App extends React.Component{
    //부모컨텐츠에 만들어 놓은 state
    state = {
        value:''
    }

    changeValue = v => {
        this.setState({
            ...this.state,
            value:v
        })
    }

    //자식에게 props로 함수를 전달하는 코드
    render(){
        return(
            <div>
                <Form change={this.changeValue} value={this.state.value}/>
            </div>
        )
    }
}

ReactDOM.render(
    <App />
    ,document.querySelector('#root')
)

 

 

 

---

 

App의 state값 전달받는 컴포넌트들

App에 입력한 state값을 그대로 자식 컴포넌트들이 props 값으로 전달받고 있다.

//새로 생성한 컴포넌트도 부모 App 안에만 있으면 값을 전달받는다.
class Value extends React.Component{
    render(){
        return(
            <h3>{this.props.value}</h3>
        )
    }
}

class App extends React.Component{
    //부모컨텐츠에 만들어 놓은 state
    state = {
        value:''
    }

    changeValue = v => {
        this.setState({
            ...this.state,
            value:v
        })
    }

    //자식에게 props로 함수를 전달하는 코드
    render(){
        return(
            <div>
                <Form change={this.changeValue} value={this.state.value}/>
                <Value value={this.state.value} />
            </div>
        )
    }
}

ReactDOM.render(
    <App />
    ,document.querySelector('#root')
)

 

 

---

 

주의점 : 무조건 최상단에 올려서 공유하는 것은 답이 아니다.

최상단에 올려놓으면 데이터가 바뀔때마다 전부 렌더링을 해야한다.

지금 우리는 싱글페이지 어플리케이션을 사용하고있다.

싱글페이지 어플리케이션의 장점은 사용자에게 화면의 요소가 즉각적이고 빠르게 바뀌는 것을 보여줄 수 있는 점이다.

그런데 매번 모든 데이터를 렌더링한다면 모든 페이지를 매번 새로 그리느라 당연히 속도가 늦어질 수 밖에 없다.

페이지가 느려지면 사용자가 줄어들고, 그렇다면 사이트의 의미가 사라진다.