🤔상태란 ?

상태는 변하는 데이터 이며
UI,프론트엔드 개발에서는 동적으로 표현되는 데이터 입니다.

Side Effect ?

상태를 다룰때 주요 고려대상이며
함수의 입력 외에도 함수의 결과에 영향을 미치는 요인
(네트워크 요청,API 호출 등)

😀상태의 두가지 구분

전역상태

전역 상태는 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태입니다.
전역변수를 남용하는것이 좋지않지만 어쩔 수 없이 사용해야 할때
그러면서 컴포넌트가 동일한 상태를 다룰때는 항상 동일한 데이터를 다루도록 해야하며

Single source of truth(신뢰할 수 있는 단일 출처) 원칙은 프론트엔드 뿐만 아니라 다양한 곳에서 언급되는 원칙으로 최대한 지키도록 합니다.

로컬상태

보통컴포넌트 내에서만 영향 을 끼치는 상태
다른 컴포넌트와 데이터를 공유하지 않는 폼(Form) 데이터는 대부분 로컬상태
form(input box, select box radio button 등)

🤔Props Drilling이란?

Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다.

😢Props Drilling문제점

Props의 전달횟수가 5회 이내로 많지 않다면 큰 문제가 없지만
규모가 커지고 복잡하시면 아래와 같은 문제들이 발생합니다.

• 가독성 이 나빠지며 , 유지보수가 힘들어집니다.
• state 변경시 Props 전달과정에서 불필요한 컴포넌트들이 리렌더링 됩니다.

😇해결방법

• 컴포넌트와 관련있는 state는 될 수 있으며 가까이 유지하기
• 상태관리 라이브러리 사용하기
  (Redux,Context api,Mobox, Recoil) 등
  라이브러리의 사용은 필수가 아니며 컴포넌트 구조를 보기 쉽게 작성합시다.

참고하면 좋은링크

리액트로 사고하기