[C/F TIL] 49일차 - React 상태관리

Code States
Front-end boost camp
Today
I
Learned

🍇 비오는 6월 21일, 49일차 쉅 고고

🍇 전역 상태 관리

• 상태란? 변하는 데이터, 프론트엔드 개발에서는 "동적으로 표현되는 데이터"를 의미
• 상태를 다룰 때 주요 고려대상은? : side effect
  -- side effect : 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인
• 전역 상태란? : 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태
• 전역 변수를 남용하는 것은 좋지 않지만 경우에 따라 필요하다.
• 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 꼭 전역 상태일 필요는 없음
  -- 출처가 달라도 됨
• 하지만, 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳 -> 전역 공간
  -- 동기화 sync과정이 필요하지만 문제를 어렵게 만듦
  -- 한 곳에서만 상태를 저장하고 접근하세요~
• 국제화 설정? : 사용자가 사용하는 브라우저나, 운영체제가 특정 언어를 사용하고 있음을 알아내서, UI에 필요한 텍스트 리소스를 따로 저장한 경우, 전역 상태로 관리

중요!

• 데이터 무결성을 위해, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 오도록
• 우리가 보여주고자 하는 데이터가 있다면 그 데이터가 어떤 경우에요 UI상에 잘못 전달되는 일이 없어야 한다.
• 상태 관리의 기본 : "상태가 어디에 위치해야 하는지"

🍇 내가 이해한 Redux의 필요성

• react에서 자식 컴포넌트를 끌어쓰기 위해 props로 값을 전달전달전달x9999 하는 것(props drilling)이 매우매우 비효율적이기 때문에, redux라는 상태관리 라이브러리를 사용한다.
• 상태관리 라이브러리는 redux 외에도 react context, mobX등이 있다!
• props로 원하는 컴포넌트를 끌어 오는 것이 유선연결이라면
• redux를 활용해 저장소에서 원하는 컴포넌트를 뿅 데려다 쓰는 것을 무선연결(블루투스?)느낌으로 사용!

🍇 29일차 수업을 마치며...

수업 자료에서 제공한 코드를 보아하니... redux로부터 useDispatch, useSelector... 등 새로운 녀석들을 데려다가 사용을 하는데 아주 어려울 것 같다는 생각이 들어 오늘도 리액트 개념학습 및 복습을 다짐해본다.