오늘 새로 배운 것
React가 작동하는 방법
index.html이란 파일이 public 폴더에 있는데 모든 웹 프로젝트는 index.html을 찾아간다.
이 파일을 찾아가서 body의 root라는 id를 가진 div를 불러온다.
index.js라는 파일에서 document.getElementById(“root”)
를 토대로 createRoot로 가상 DOM을 생성한다.
root의 가장 깊은 곳에 App이라는 컴포넌트를 가져오게 돼있다.
바로 App.js(.jsx)이다. 이 파일을 개발하면서 react를 개발한다.
다시 말하면, App.js가 우리의 playground이다.
redux가 있기 전에는…
어떤 중간 컴포넌트에서는 쓰지 않는 state도 해당 컴포넌트에 전달해주기 위해서 props drilling을 한다.
만약 전달받을 컴포넌트가 엄청 많다면? 그리고 변경사항이 발생한다면 다 바꿔줘야하는데 이는 비효율적이다.
store 저장소
redux의 핵심은 store라고 할 수 있다.
store 안에는 state와 reducer가 들어있다.
state가 변경되는 곳이 많다보니 일원화하자 -> reducer
어디서 문제가 발생됐는지 파악하기 쉬워졌다. (모든 컴포넌트를 다 뒤지지 않아도 된다.)
state 변경
action들이 dispatch되는데 dispatch가 eventHandler 가지고 store로 가서 reducer에 정의 된 방법을 기반으로 action이 일치되면 state를 변경.
하루를 돌아보며...
오늘은 기존에 useState만 사용하던 프로그램에 react-redux와 router 사용을 위한 패키지를 설치하고 관련 파일과 코드를 추가하였다. 그리고 redux로 바꿔서 적용하려고 하는데 생각보다 잘 안됐다. 아직 dispatch, reducer, useSelector 등 이런 것들을 제대로 사용하기에 디테일한 개념이 잘 안 잡혀서 그런 것 같다. 주말에도 이부분을 좀 공부를 해야할 듯하다.
