오늘 배운 것

React Main Concept 3/3

React is a JavaScript library for building user interfaces.

앞으로 3개의 포스팅에 걸쳐 React의 주요 개념에 대해 공식문서를 기반으로 정리해보고자 한다.

5. Lifting State Up

React Component들의 흐름은 단방향적이다. Component들 사이에서 전달되는 Props는 수정 변경할 수 없을 뿐만아니라 한 방향으로만 흐른다.

기본적으로 하위 Component에서 변경한 사항을 상위 Component에서는 알 수 없다. 하지만 하위 Component에서 변경한 사항을 상위 Component를 포함해 여러 Component에서 공유해야할 필요성이 있을 수도 있다.

이럴 경우에 사용하는 것이 State 끌어올리기(Lifting State Up)이다.

//videoList에서 동영상을 클릭하면
//videoPlayer에서 재생되는 어플리케이션이 있다고 가정해보자.
//가장 상위 컴포넌트인 App이 있고, 
//그 하위 컴포넌트로 videoPlayer와 videoList 컴포넌트가 있다.
//이럴 경우 videoList에서 변경된 사항을 videoPlayer와 어떻게 공유할 수 있을까.

class App extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            videos : videoDatas
            currentVideo : currentVideoData
        }
        this.handlingState = this.handlingState.bind(this)
    }
//클래스 컴포넌트 생성, 
//State 값으로 전체비디오들의 데이터와 현재 재생 비디오의 데이터를 설정했다고 하자.
    
    handlingState(value){
        this.setState({currentVideo : value})
    }
//이 메소드는 State의 currentVideo 데이터를 변경시켜준다.
    
    render(){
        return(
            <>
            <VideoPlayer
                currentVideo = {this.state.currentVideo}
                />
            <VideoPlayList 
                handlingState={this.handlingState} 
                videos = {this.state.video}
                />
            </>
        )
    }
//1. 렌더링을 할 때 하위 컴포넌트에 State 값을 변화시키는 메소드를
//props로 전달할 수 있다.
//2. 이제 VideoPlayList에서 이 메소드를 사용할 수 있으며,   
//더 아래로 전달해준다면 그 하위 컴포넌트에서도 handlingState 메소드를 사용할 수 있다.
//3. 이는 하위 컴포넌트에서 생긴 변경사항을 상위 컴포넌트의 State에 반영할 수 있다는 뜻이다.
//4. 따라서 curruentVideo 데이터에 변경사항이 State 값에 반영이 되면,
//Life Cycle Method에 의해 render가 다시 실행되면서
//VideoPlayer 컴포넌트에 변경된 currentVideo 데이터가 반영될 것이다.
}


ReactDOM.render(
  <App />,
  document.getElementById('root')
);