[React] 상태관리

🦋 상태 state

• 변하는 데이터
• 화면을 컴포넌트로 분리하고 서로 어떤 상태를 공유하는지 알아봐야한다
• side effect : 함수,컴포넌트의 입력외에도 함수결과에 영향을 미치는 요인
• 로컬상태 : 특정 컴포넌트 안에서만 관리되는 상태, useState로 씀
• 전역상태 : 프로덕트 전체 혹은 여러가지 컴포넌트가 동시에 관리하는 상태(다크모드)
• 항상 동일한 데이터는 항상 같은곳에서 가지고 와야한다.

🦋 Props Drilling

• 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상
• A-D전달을 위해 B,C컴포넌트를 거치는 상황
• 컴포넌트 규모가 커지면 문제가 발생함
• 해결법
• state를 되도록 가까이 두는법
• 상태관리 라이브러리를 사용하는법(Redux) : 전역관리저장소에서 직접 state를 꺼내쓸수 있음

🦋 Props 복습

• 내려받고, 내려주는것

function Child3({ plusNum, minusNum }) {   //위로부터 props를 내려받고
  console.log('Child3');
  return (
    <Container>
      <Text>[Child 3 Component]</Text>
      {/* plusNum, minusNum 함수를 props로 전달해주세요! */}
      <Child4 plusNum={plusNum} minusNum={minusNum} /> // 아래로 props를 내려주는 코드
    </Container>
  );
}

🦋 React Hooks

• 실무에서 이전코드와 추가요청을 받았을 때

• 요청받은 기능을 정리한다.
  // 장바구니에 상품 추가
  // 장바구니 내 삭제버튼
  // 장바구니 내 아이템개수 추가하기
  // 장바구니에 몇개들어있는지 띄우기

• 일단 코드의 구조를 본다.
  // 최상위컴포넌트 app에 2가지 상태가 있다.
  // initialState를 먼저 확인해보자.
  // 객체안 items는 배열인데 객체를 요소로 가진다.
  // 객체안 cartItems는 장바구니에 담긴 아이템 id와 양이 몇개인지 담고있는 데이터다.

• 내부의 컴포넌트들을 본다.
  // ItemListContainer 을 보자. 아까 봤던 items를 props로 내려주고 있구나.
  // 쇼핑카트.js를 보면 카트아이템, 오더써머리를 갖고있다.

• 꼭 코드치기 전에 컴포넌트 구조와, 데이터 흐름을 먼저 그림으로 정리한다.
  

• 화살표로 state,props를 정리했다.