상태 관리하기 State (1) | React

상태 관리하기 Managing State

---

상호작용성 추가 Adding Interactivity

화면에 어떤 것들은 유저의 입력에 따라 업데이트됩니다.

ex) 앨범에서 이미지를 클릭하면 active 이미지를 바꾸는 것 같은...

React에서 시간이 지남에 따라 변경되는 데이터를 state라고 합니다.

모든 컴포넌트에 state를 추가할 수 있고, 필요할 때 값을 업데이트할 수 있습니다.

 

▪️ 이벤트 반응하기 Responding to events

React를 사용하여 JSX에 이벤트 핸들러를 추가할 수 있습니다.

이벤트 핸들러는 form input과 같은 요소에 클릭, 마우스오버, 포커싱과 같은 유저의 상호작용에 대한 응답으로 발생하는 메소드들입니다.

button과 같은 내장된 컴포넌트들은 오직 onclick 같은 브라우저 내장 이벤트만 지원합니다.

하지만 우리는 고유 컴포넌트를 만들 수 있고 이벤트 핸들러 속성에 우리가 원하는 애플리케이션 명칭을 부여할 수 있습니다.

 

▪️ 상태: 컴포넌트 메모리 State: a component's memory

컴포넌트는 종종 상호작용의 결과로써 화면에 있는 것들을 바꿔야 할 필요가 있습니다.

• form에 타이핑시 input 필드 업데이트
• 이미지 carousel의 next 클릭 시 보여지는 이미지 변경
• buy 버튼 클릭시 상품 장바구니에 추가

React에서 state는 이런 컴포넌트별 메모리를 뜻하기도 합니다.

 

useState hook을 사용하여 컴포넌트에 state를 추가할 수 있습니다.

hook은 컴포넌트가 React 기능들을 사용할 수 있게 해주는 특별한 메소드의 집합입니다.

useState hook으로 state 변수를 정의할 수 있습니다.

초기 state로 한 쌍의 값을 반환합니다: 현재 state, state를 업데이트할 수 있는 setter

const [index, setIndex] = useState(0);
const [showMore, setShowMore] = useState(false);

 

▪️ 랜더링과 커밋 Render and commit

컴포넌트가 화면에 표시되기 전에 React에 의해 랜더링 되어야 합니다.

컴포넌트가 주방에 있는 요리사이고, 재료들로 맛있는 요리를 만든다고 상상해 보세요.

React는 고객의 요청과 주문을 전달하는 웨이터입니다.

UI 요청과 제공 프로세스는 3단계로 이루어집니다.

1. 랜더링 발생 Triggering - 식당의 주문을 주방으로 전달
2. 컴포넌트 랜더링 Rendering - 주방에서 주문 준비
3. DOM에 커밋 Commiting - 테이블에 주문

 

▪️ 스냅샷으로써의 상태 State as snapshot

일반적인 Javascript의 변수와는 다르게, React state는 snapshot과 더 비슷하게 동작합니다.

set 하는 것은 이미 가지고 있는 값을 변경하지 않고, 대신에 리랜더링을 발생시킵니다.

처음에는 엄청 신기하죠!

이 동작으로 미묘한 버그를 피할 수 있습니다.

 

 

Adding Interactivity – React