63. State 끌어올리기

지난 강의에서는 아주 중요한 개념인 데이터를 자식 컴포넌트에서 부모 컴포넌트로 이동하는 방법을 배웠다. 

props를 사용해서 부모 컴포넌트로부터 함수를 받고 자식 컴포넌트에서 그 함수를 불러왔다

이것은 다른 핵심 개념과 아주 깊은 관련이 있는데, 여러분은 인식하지 못했지만 이미 사용하고 있었습니다

"상태(State) 끌어올리기" 라는 개념이다.

 

이 데모 프로그램을 간단히 묘사한 컴포넌트 트리를 한 번 보자

 

 

Expenses와 NewExpense를 렌더링하는 App 컴포넌트가 있는 프로그램이다 

여기서 NewExpense 컴포넌트는 몇몇 데이터를 생성하는 컴포넌트이다

우리의 예제 프로그램에서는 일부 사용자 입력을 여기서 가져오고 있다

컴포넌트에서 데이터를 생성하거나 가져오는 것은 꽤 흔한 일이다

하지만 그 컴포넌트에서는 그 데이터가 필요하지 않을 수도 있고 대신 다른 컴포넌트 Expenses에서 필요할 수도 있다

결국 그 컴포넌트에서 데이터가 필요하고 살짝 변형되어 객체에 결합되지만

그것은 우리가 NewExpense에서 가져온 데이터이다

그래서 데이터를 넘겨주고 싶지만 이런 식으로 작동하지는 않는다

왜냐하면 두 형제 컴포넌트는 직접적으로 연결되어 있지 않기 때문이다

 

 

 

대신, 지금까지 배웠던 것처럼 부모에서 자식으로 그리고 자식에서 부모로만 소통할 수 있다

그래서 여기처럼 그런 경우에 가장 가까운 부모 컴포넌트를 활용하는데
부모 컴포넌트는 직접적이든, 간접적이든 두 컴포넌트와 관련이 있다

이 경우에는 App 컴포넌트가 그 역할을 한다. 

우리 응용프로그램에서 App컴포넌트는 Expenses와 NewExpense에 모두 접근한다 

왜냐하면 반환되는 JSX코드에서 두 컴포넌트를 모두 렌더링하기 때문이다
그래서 그것을 사용하려는 것이다

우리는 상태를 가장 가까운 관련 컴포넌트에 저장할 수 있기 때문인데
관련 있는 두 컴포넌트에 접근하는 부모 컴포넌트가 그 역할을 한다. 

그래서 NewExpense에서 생성된 상태 데이터를 상태 끌어올리기로 해서
App컴포넌트에 전달한다

그리고 그것이 바로 우리가 이미 이 데모 프로그램에서 하고 있는 작업이다

props를 사용해서 onAddExpense함수를 한다 

하지만 그것만으로는 상태를 끌어올릴 수 없고 단지 props를 통해 받는 함수를 호출할 뿐입니다

중요한 작업을 하나 해야 한다. 우리가 여기서 호출하고 있는 함수에 데이터를 전달하는 것이다

props.onAddExpense(expenseData);

 

우리는 속성 onAddExpense에서 받는 함수에 expenseData를 전달한다
그래서 우리는 함수에 데이터를 전달하고 그렇게 해서 데이터를 올리고 상태를 끌어올리고 있다
우리는 NewExpense컴포넌트에 expenseData를 보관하지 않는다.

 

대신 App컴포넌트로 끌어올려서 지금은 콘솔에 출력하는 곳에서 addExpenseHandler처럼 사용할 수 있다
아직은 그 데이터를 state로 다루지는 않고, 출력만 하고 있다.

하지만 다음 섹션에서는 여기 있는 전체 배열을 state로 다룰 것이고 배열에 expense를 추가할 것이다

우리는 이미 배열을 Expense컴포넌트에 전달하고 있는데 그것은 상태 끌어올리기의 또 다른 부분이기 때문이다

우리는 지금 상태를 끌어올리고 있고 데이터를 부모 컴포넌트에 전달하고 있는데

App컴포넌트나 데모 프로그램에서처럼 직접적으로 데이터가 필요하기 때문이다

이런 일은 아주 흔한 일인데 우리는 props를 통해 다른 컴포넌트로 데이터를 전달하길 원하기 때문이다.

그것이 바로 지난 강의에서 했던 것들인데 아주 중요한 개념이다

여러분은 리액트로 작업할 때 이 상태 끌어올리기라는 용어를 아주 자주 접하게 될 것이고

물론 이 과정에서도 마찬가지이다

상태 끌어올리기는 자식 컴포넌트에서 어떤 부모 컴포넌트로 데이터를 이동해서
거기서 사용하거나또는 다른 자식 컴포넌트로 데이터를 전달하는 것인데

여담이지만 만약 여러분이 직접적으로 두 자식 컴포넌트와 상호작용을 하는 App컴포넌트를 갖고 있다면 이 방법은 작동하지 않는다

대신, 이 경우에는 NewExpense컴포넌트는 사실 우리가 전달하는 데이터를 생성하는 컴포넌트가 아니다 

대신 ExpenseForm 컴포넌트에서  데이터를 생성합니다

State로 작업하고 사용자 입력을 가져와서 저장하는 컴포넌트입니다

그리고 그 컴포넌트는 불러온 데이터를 NewExpense컴포넌트에 전달합니다

그래서 이미 여기에서는 상태를 끌어올렸고 App컴포넌트까지 더 멀리 끌어올렸는데

App컴포넌트는 가장 첫번째 줄의 컴포넌트이며

NewExpense나 ExpenseForm컴포넌트에 접근하지 않는다

Expenses컴포넌트는 결국 데이터가 필요한 컴포넌트이기 때문에 App 컴포넌트까지 상태를 끌어올려야 합니다