state 끌어올리기 (Lifting State Up)
state 와 props 란 무엇일까??
리액트를 배우고싶어서 코드스테이츠에 들어왔지만, 아직까지도 나는 states 와 props 에
대한 이해가 부족한 상태이다.
몸이 안좋아서 원활하게 강의를 따라가지 못하는것 또한 잘못이지만 그 핑계로
조금더 강의를 볼 수 있는 저녁시간에 억지로 누워있고 유튜브를 보면서 낄낄대던 나...
다시 한번 반성해야 할 필요성을 느낀다.
저번주에 다시 배웠던 states 의 내용중 끌어올리기에 관한 내용을 복습해보았다.
리액트는 기본적으로 단방향 데이터 흐름이라는 원칙이 존재한다.
때문에 하위컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태나 타입이 무엇인지만 알수 있고,
해당 데이터가 state 로 부터 전달되었는지 하드코딩으로 입력된 내용인지는 판단 할 수 없다.
여기서 React 공식사이트에서는 다음과 관련된 해결책을 제시한다고 한다
" 상위 컴포넌트의 '상태를 변경하는 함수 ' 그 자체를 하위 컴포넌트로 전달 하고, 이 함수를 하위 컴포넌트가 실행한다"
이것이 바로 상태 끌어올리기 라는 것이다.
특정 함수가 있을때에 함수의 전달은 항상 props 를 이용한다.
그럼 콜백함수를 이용해서 어떠한 방식으로 끌어올리기를 할 수 있을까??
아직까지도 감이 오지않아서 공식사이트와 더불어 책을 통해 복습을 진행하고 있다.
https://ko.reactjs.org/docs/lifting-state-up.html
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
React 애플리케이션 안에서 변경이 일어나는 데이터에 대해서는 “진리의 원천(source of truth)“을 하나만 두어야 합니다. 보통의 경우, state는 렌더링에 그 값을 필요로 하는 컴포넌트에 먼저 추가됩니다. 그러고 나서 다른 컴포넌트도 역시 그 값이 필요하게 되면 그 값을 그들의 가장 가까운 공통 조상으로 끌어올리면 됩니다. 다른 컴포넌트 간에 존재하는 state를 동기화시키려고 노력하는 대신 하향식 데이터 흐름에 기대는 걸 추천합니다.
state를 끌어올리는 작업은 양방향 바인딩 접근 방식보다 더 많은 “보일러 플레이트” 코드를 유발하지만, 버그를 찾고 격리하기 더 쉽게 만든다는 장점이 있습니다. 어떤 state든 간에 특정 컴포넌트 안에서 존재하기 마련이고 그 컴포넌트가 자신의 state를 스스로 변경할 수 있으므로 버그가 존재할 수 있는 범위가 크게 줄어듭니다. 또한 사용자의 입력을 거부하거나 변형하는 자체 로직을 구현할 수도 있습니다.
어떤 값이 props 또는 state로부터 계산될 수 있다면, 아마도 그 값을 state에 두어서는 안 됩니다. 예를 들어 celsiusValue와 fahrenheitValue를 둘 다 저장하는 대신, 단지 최근에 변경된 temperature와 scale만 저장하면 됩니다. 다른 입력 필드의 값은 항상 그 값들에 기반해서 render() 메서드 안에서 계산될 수 있습니다. 이를 통해 사용자 입력값의 정밀도를 유지한 채 다른 필드의 입력값에 반올림을 지우거나 적용할 수 있게 됩니다.
UI에서 무언가 잘못된 부분이 있을 경우, React Developer Tools를 이용하여 props를 검사하고 state를 갱신할 책임이 있는 컴포넌트를 찾을 때까지 트리를 따라 탐색해보세요. 이렇게 함으로써 소스 코드에서 버그를 추적할 수 있습니다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
공식사이트에 있는 내용인데 솔직히 무슨 소리인지 잘 감이 오지 않는다.
여러번 코딩을 하며 따라해보다보면 무슨 뜻인지 알 수 있지 않을까...?
