React - Lifting state(state 끌어올리기)

Lifting state 개념을 이해하는데 이틀 정도 걸렸다. 결국 이해는 했지만, 사용하기 어려움은 있다.

이전글에 있는 그림을 인용하면...

state는 하위에서 수정해서 상위에 값을 변화 시킬 수 있다. 즉, 상위에 있는 state 값을 하위에서 수정하여 상위로 올려주는 것이 Lifting state이다.

Codestates 강의시간(sprint review)에 이해하게 된 개념인데, 그림을 아무리 봐야 코드로 구현하는 것은 매우 어려웠다.

 

Codestates의 있는 code 인용해서 설명을 하면

우선 상위 하위 관계를 먼저 보면 최상위 App - VideoList - VideoListEntry 구조이다. 전체적인 코드를 보면 아래 사진과 같다.

  *빨간색이 state 진행방향

  *파란색이 state 값 lifting 이다.

state를 변경하는 this.setState()메소드 이동 경로를 보면...최상위(App)->상위(List)

  *handleTitle이 state 값을 변경하는 메소드이다.

  *handleTitle 메소드를 VideoList 컴포넌트를 통해서 하위로 전달한다.

  *하위(List)에서 상위로 부터 받은 메소드 이기 때문에 props 객체로 전달이 되고, 이것을 onTitle 할당해서 VidoeListEntry에 전달을 한다.

  *여기서 props는 상위에서 하위 컴포넌트로 전달하는 값이고 하위에서는 객체로 받는다.

  *VideoList에서 보면 VideoList 함수에 인자로 props가 들어오고 props.videos는 상위 App에서 전달할 때, 주는 video값으로 fakeData를 주고 있다.

  *즉 props를 console로 확인 하면

props = { videos:fakeData, onTilte = function} 여기서 function은 handleTitle 메소드 이다.

 

List - Entry를 살펴 보면

  *List에 있는 onTitle은 다시 하위로 넘어 가면서 props 객체를 통해 받게 된다.

  *그래서 title을 클릭했을 때(onClick) 이벤트를 넣어주고 props.onTitle 메소드가 실행된다. 그때의 인자 값으로 props.video를 받게 된다.

  *props.video는 상위(List)에서들어온 video이며 하위로 넘어가면서 props.video 값을 받는다.

 

App - Entry를 살펴 보면

  *onClick 이벤트가 발생 했을 때, 실질적으로 handleTitle 메소드가 실행이 되는 것이며 data의 인자에 props.video가 들어간다.

  *이것이 Lifting State(state 끌어올리기 이다)

  *이것을 이해 할 때, onTitle을 callback 함수로 넘겨주는 것이다.

  *값으로 함수를 넘겨주고 언제 실행 될지는 모르는.... 함수를 2번 넘겨 주면서 callback 함수는 onClick 이벤트가 발생 했을 때, 상위로 부터 이어진 fakeData의 값을 인자로 받는데 상위(List)에서 map을 통해서 Entry의 전달되는 값은 fakeData[n]의 객체를 보내게 된다.

  *이후 state 값을 변경한 값을 VideoPlayer에 전달해서 제목을 누르면 VideoPlayer의 값을 동적으로 변화 시킬 수 있다.

 

#React#codestates#상위#하위#state#liftingstate#state끌어올리기