# 6-LiftingState

# 목차

• 1. 상태올리기-Lifting State Up
• 2. 기초
  • 2.0.1. 시작코드
  • 2.0.2. 완료코드
• 3. 심화
  • 3.0.1. 시작코드
  • 3.0.2. 완료코드

# 1. 상태올리기-Lifting State Up

리액트는 데이터 흐름은 단방향 하향식 데이터 구조를 가집니다.

부모컴포넌트로 부터 자식컴포넌트로의 데이터 전달만 가능하죠.

앱을 개발하게 되면 하나의 데이터를 여러 컴포넌트에서 동시에 다뤄야 하는 경우가 발생합니다. 예를 들면 회원로그인 후 로그인상태의 값의 경우 모든 컴포넌트에서 상태 데이터를 공유해야겠죠.

아래의 그림 처럼 리액트 앱에서 컴포넌트가 공통적으로 사용하는 로그인 상태값을 가진 로그인 컴포넌트를 상위컴포넌트로 설계 할 경우 모든 하위컴포넌트에 같은 데이터가 전달되는 것을 볼수 있습니다. 이런 경우는 문제가 없겠죠.

하지만 하위 컴포넌트에서 로그인 상태값을 바꿔야 하는 경우에는 어떨까요?

사용자가 로그인후 myorder 컴포넌트의 order-list 를 확인 후 로그아웃을 한다면 로그인 상태값은 false 로 수정되어야 할 것 입니다.

데이터변경이 일어난 listB 컴포넌트는 Login 컴포넌트의 2뎁스 하위에 위치하고 있기때문에 상위 요소로 데이터를 전달해야 하는데 리액트에서는 방법이 없습니다.

이때 사용할수 있는 방법이 부모와 자식의 상향식 데이터 전달이며 이 방법을 Lifting State 라고 합니다.

간단한 예제로 학습 한 후 제작중인 회원가입 앱에 적용해보겠습니다.

# 2. 기초

• src 폴더정리
• test 폴더를 만들고 간단한 예제를 진행했던 파일을 옮깁니다.
• test/6/폴더를 생성하고 Accordian 컴포넌트를 생성합니다.
• index.js 로 이동하여 App 컴포넌트 대신 test/Accordian 컴포넌트를 임포트합니다.

# 2.0.1. 시작코드

# 2.0.2. 완료코드

# 3. 심화

# 3.0.1. 시작코드

# 3.0.2. 완료코드