React.js 입문 3일차

섹션 4, 5

State

• title을 변수로 놓아도 변경사항이 DOM에 적용되지 않는다. → DOM을 초기에 한번만 랜더링 하기 때문에.

• UI에 변경사항을 적용하려면 useState라는 리액트훅을 사용한다. → 컴포넌트 안에 넣어야 한다. → 배열을 리턴한다. 첫번째 요소 : 값. 현재 상태 두번째 요소 : 함수. 업데이트 된 상태 → state가 등록된 컴포넌트를 다시 읽고 UI를 업데이트 한다. → 컴포넌트 인스턴스 단위이기 때문에 업데이트 하면서 다른 요소들에게 영향을 미치지 않는다.

 

• 하나의 컴포넌트 안에 여러개의 state 슬라이스

1. 그냥 여러번 호출하면 됌

 

2. 객체로 받기
→ 객체의 모든 요소를 업데이트 해 주어야 함

• 이전값에 의존하여 변경하기
  → 그냥 오버라이드 하지 않고 이전 상태에 의존하여

• 공용 핸들러 사용하기

상향식 데이터 전송

• 하향식 (부모 → 자식)은 props를 사용했다.
• props를 이용하여 함수 정의는 부모에서, 함수 호출은 자식에서

App.js

NewExpense.js

• Lifting State Up
  형제 관계에서는 공유하지 못함. 부모를 통해야 함.