ColorPickerApp - state hoisting으로 3개의 slider의 값을 하나의 색으로 조합하기

 

 

따라서 코드를 설명하자면,

 

1. state 선언: 데이터 변화에 따라 UI를 변경하기 위해서 사용

 

2. 상위 Component에서 하위 Component에 state 전달

 

3.  하위 Component인 ColorPicker에서 slider를 통해서 값을 변경

 

4. 값이 변경되면 상위 Component의 state 값도 변경 + 동시에, 모든 UI 다시 랜더링

 

5. 모든 UI가 다시 랜더링 되면서, ColorInfoIntoText의 값도 함께 변경된다. 

 

 

이런식으로 state가 변경되면 다시 랜더링되면서 모든 ui도 함게 변한다.