0020. Front-end 공부하기11 - Lifting State Up (Feat. 대체 props와 state의 차이는 뭐였더라??)

섹션 12. Lifting State up

1강. Shared State

Shared State

• 리액트로 개발하다 보면, 하나의 데이터를 여러 개의 컴포넌트에서 표현해야 하는 경우가 발생함
• 각 컴포넌트의 스테이트에서 데이터를 각각 보관하는 것이 아니라, 가장 가까운 부모 컴포넌트에의 스테이트를 공유해서 사용하는 것이 효율적
• 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 스테이트를 공유해서 사용하는 것
• State에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말함
• 하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용하는 것

 

자식 컴포넌트들이 각각 값을 가지고 있을 필요가 없다. 부모 state에 있는 값에 2, 3을 곱해주면 되기 때문이다.

 

 

자식 컴포넌트들이 각각 온도값을 갖고 있을 필요 없이 부모 컴포넌트의 state에 있는 섭씨 온도값을 변환해서 표시해주면 됨

 

 

 

2강. 하위 컴포넌트에서 state 공유하기

물의 끓음 여부를 알려주는 컴포넌트

BoilingVerdict라는 간단한 컴포넌트

위의 컴포넌트를 사용하는 부모 컴포넌트

 

 

Calculator 컴포넌트 안에 온도를 입력하는 부분을 별도의 컴포넌트로 추출하기

- 섭씨온도와 화씨온도를 각각 따로 입력받을 수 있도록 하여 재사용이 가능하도록 만들게 하기 위함

 

온도를 입력받기 위한 TemperatureInput 컴포넌트

 

위의 컴포넌트를 사용하도록 Calculator 컴포넌트를 변경한 것

 

섭씨와 화씨 온도값을 따로 받으면 2개의 값이 다를 수 있음 -> 동기화 필요

섭씨온도와 화씨온도 값을 동기화시키기 위해서 먼저 각각에 대해 변환하는 함수를 작성해야 함

 

온도 변환 함수 작성하기

 

섭씨온도를 화씨온도로 변환하는 함수와 화씨온도를 섭씨온도로 변환하는 함수

 

tryConver 함수 : 온도 값과 변환하는 함수를 파라미터로 받아서 값을 변환시켜 리턴하는 함수

tryConver를 실제로 사용하는 방법. 온도값과 변환하는 함수를 파라미터로 넣어줌

 

 

Shared State 적용하기

하위 컴포넌트의 state를 공통된 부모 컴포넌트로 끌어올려서 shared state를 적용해야 함

state를 상위 컴포넌트로 올리는 것 : lifting state up

- 하위 컴포넌트의 state를 공통 상위 컴포넌트로 올림!

 

TemperatureInput 컴포넌트에서 온도값을 가져오는 부분을 수정

 

온도값을 컴포넌트의 state에서 가져오는 것이 아니라 props를 통해서 가져오게 됨

컴포넌트 state를 사용하지 않기 때문에 입력값이 변경되었을 때 상위 컴포넌트로 변경된 값을 전달해 주어야 함

 

HandleChange함수 변경

 

사용자가 온도값을 변경할 때마다 onTemperatureChange 함수를 통해 변경된 온도값이 상위 컴포넌트로 전달됨

최종적으로 완성된 TemperatureInput 컴포넌트

 

 state는 제거되었고, 오로지 상위 컴포넌트에서 전달받은 값만을 사용함.

 

Calculator 컴포넌트 변경하기

변경된 TemperatureInput 컴포넌트에 맞춰서 Calculator 컴포넌트 변경

state로 Temperature와 Scale을 선언하여 온도값과 단위를 각각 저장

온도값과 단위를 통해 섭씨온도와 화씨온도를 구해서 사용

 

TempertureInput 컴포넌트를 사용하는 부분에서는 각 단위로 변환된 온도값과 단위를 props로 넣어주었고, 값이 변경되었을 때 업데이트하기 위한 함수를 onTemperatureChange에 넣어줌

- 섭씨온도가 변경되면 단위가 C로 변경됨

- 화씨온도가 변경되면 단위가 F로 변경됨

 

최종적으로 완성된 그림(출처 : soaple)

 

상위 컴포넌트인 Calculator에서 온도값과 단위를 각각의 state로 가지고 있으며 두 개의 하위 컴포넌트는 각각 섭씨와 화씨로 변환된 온도값과 단위, 그리고 온도를 업데이트하기 위한 함수를 props로 가지고 있음

각 컴포넌트가 state의 값을 갖고 있는 것이 아니라, 공통된 상위 컴포넌트로 올려서 공유하는 방법을 사용하면 리액트에서 더욱 간결하고 효율적으로 개발할 수 있음

 

<추가>

듣다 듣다 props와 state의 차이가 헷갈려서 다시 찾아보기 시작했다.

 

1. Props : 속성

• props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용함
• props는 읽기 전용으로, 자식 컴포넌트에서 수정할 수 없음
• 주로 정적인 데이터나 부모 컴포넌트와의 상호작용을 위한 정보를 전달할 때 사용함

2. State : 상태

• state는 컴포넌트의 내부 데이터를 나타냄
• state는 컴포넌트 내에서 변경 가능하며, 변경할 때마다 컴포넌트가 다시 렌더링 됨
• 주로 컴포넌트 내에서 동적인 데이터를 저장하고 관리하는 데 사용함

즉, props는 외부에서 전달되는 읽기 전용이고, state는 컴포넌트 내부에서 관리되어 변경가능함

props는 컴포넌트 간의 데이터 전달에 사용되고, state는 컴포넌트 내의 상태를 관리하는 데 사용함

 

3강. (실습) 섭씨온도와 화씨온도 표시하기

1) 섭씨온도와 화씨온도 표시하기

온도값이 변경되면 onTemperatureChange 함수를 호출하여 상위 컴포넌트로 변경된 값을 전달하게 됨

 

2) Calculator 컴포넌트 만들기

 

아주 높은 확률로 에러가 날 것 같다.

 

index.js에 넣어주고 npm start !

 

역시 에러가 안 날수가 없다.

대체 왜 이렇게 에러메시지들은 공포스럽고 안 예쁘게 만들어놨는지 모르겠다.

 

성공!

하지만 섭씨에 입력하면 화씨에 아웃풋이 나와야 하는데, 화씨는 작동을 하지 않았다.

 

반대로 화씨에 입력해도 섭씨가 자동으로 입력이 되지 않았다.

 

수정완료!

 

화씨를 입력해도 OK!

 

에러가 발생한 이유는 영문 오타 때문이었다.

필자는 영어 스펠링에 아주 약한데, 그 약점이 고스란히 드러나게 되었다. 챗GPT 선생님이 아니었으면 찾는 데 한세월이 걸렸든지 해결을 못했든지 했을 것 같다.

감사해요 챗GPT, 사랑해요 샘 올트먼!

 

<느낀 점>

점점 기본이 중요하다고 생각이 든다. html과 JavaScript를 모르기 때문에 코드에 대해서 이해하기도 어렵고, 그냥 화면을 보고 따라 하는 수준 정도밖에 못한다. 심지어 큰 에러는 대부분 GPT 선생님이 잡아주고 계시기 때문에 필자가 하는 코딩은 없는 상황이다. 원래 이게 맞는지 필자가 못하는 건지는 모르겠지만, 매우 많은 공부가 필요할 것으로 보인다.