state hoisting - slider를 통한 폰트 조절 앱 만들기

state hoisting 이란?

기본적으로 State는 개별 Component에서 유지된다. 그러나 다른 Componet(예를 들면 자식 Component)에서도 같은 State 값이 필요하다면, 해당 State를 상위(부모) Component에서 공유할 수 있고, 상태의 일관성을 유지할 수 있다.

 

쉽게 말해서, 상위 Component에서 하위 Component에게 값을 전달하고 하위 Component에서 값을 변경하면 상위 Component에서도 값 변경이 일어나고, 화면 렌더링도 일어난다. 따라서, 변경된 값이 자동으로 적용된다.

 

 

해결 방법 1: MutableState<타입>으로 상태를 전달

: 상태 객체를 직접 전달해서, 자식 Componet가 부모 Componet의 state를 직접 접근하고 관리할 수 있게 하는 것이다.

쉽게 말해서 객체 자체를 참조헤서 자식 컴포넌트에서 값에 접근할 수 있는 것이다.

 

 

해결 방법 2: 람다식을 형식 인자로 전달

: 상태를 변경하는 람다 함수와 값을 전달해서, 자식 Componet가 부모 Componet 의 state 자체에 의존하지 않고 값을 관리할 수 있도록 하는 것이다.

쉽게 말해서, 객체를 직접 사용하지 않고 값을 제어하기 위한 람다식과 값을 선언해서 넘겨주는 것이다.

 

 

 

 

 

---

 

1. 커스텀 텍스트와 기본 슬라이더 이용해서 앱 만들기

 

 

 

---

 

2. 커스텀 텍스트와  커스텀 슬라이드 - MutableState<타입>

 

 

---

 

3. 커스텀 텍스트와  커스텀 슬라이드 - 람다식