React의 Redux... 이거.. 맞나...?
리액트를 개발하다 보면 항상 다루게 되는 개념은 바로 상태관리!!!
상태를 괂리하기 위한 도구(라이브러리)는 여러가지다~ (Redux, Recoil, Overmind 등)
그 중 우리가 쓸 것은 바로 Redux!!
상태관리는 State.. State는 props를 통해 아래로 내려가고 State는 setState로 관리되고있다?
-> 이걸 잘하기위해 Redux를 쓴다?
State가 너무 많은 곳에 퍼져있었고
컴포넌트마다 그 State를 맘대로 변경하고 있었다 . . .
그래서 Store 안에 State를 다 넣고 관리한다 ??? (이건아니고 지역스테이트(컴포넌트 스테이트)도 있을 수 있다)
-> 전역(전체영역)에서 관리!! global..
전역 state -> redux store에 있는 녀석
컴포넌트 state -> 컴포넌트 안에서만 활용되서 props로 내려가는 녀석
- config store?
const rootReducer = combineReducers({counter})-
리듀서를 만든다.
-
만든 리듀서를 통해 store를 생성한다
-
생성한 store를 export (내보낸다)
모든 웹 파일은 무적권 index.html 파일을 바라본다.
근데 그 안에 id가 root 로 되어있는 애가 있네?
이건 어딨냐.. -> index.js에 있다~
그래서 들어가보니까 root로 react돔을 만들어서 어쩌고저쩌고..
결국 App.js 에서 놀기시작해야한다~ (src 폴더 안에있는..)
개발은 App의 return 에서 끝났다!
그리고 컴포넌트끼리 정보를 주는 것은 props로 이루어진다!!!
그렇다면 우리 react 구조는 어떻게 되어있냐!
함수형 프로그래밍을 이용하고 있다
-> function으로 모든 컴포넌트를 만들고 있다~
그리고 함수형 프로그래밍에서는!!
나보다 하위 컴포넌트들을 만들어서 그 밑으로 정보를 주면서 이루어진다! (props)를 통해..
기본 props는 children 하나밖에 없고 Header 안에 있는 Hyojin's~~ 부분이 children 으로 들어간다~
그래서 그걸 받아서..
children으로 가져오는데 (구조분해할당)으로 가져옴
원래는 props.children 으로 접근해야하는데 구조분해로 저렇게 가져왔다~~
그리고 그 children을 가져와서 쓰려면 {} 안에!! 써야한다..
잠깐 알고 가는 팁
컴포넌트를 만들 때 return에 최상단 컴포넌트가 하나만 있어야 한다!
근데 최상단 컴포넌트를 여러개 만들고 싶다?
이렇게 <></> 빈태그를 만들어주면 된다... 와! 신기해!
리액트에서 결국 return문은 뭐냐!
랜더링을 하는거다~
위에 써져있는게 그래서 return문 이후에 나오는거다~
useState 의 구조는 이러하다..
