Mi Lugarcito
React 설명 & HOOK 설명 & Redux 설명 (상태관리 라이브러리) 본문
Prop ? 부모 컴포넌트 -> 자식 컴포넌트로 무언가를 보낼때 (위->아래로만 상속이 가능하며 변경 불가능함)
State ? 그냥 컴포넌트 자체 안에서 데이터를 전달할때, 변경가능함 (데이터가 변할때 rerendering 된다!)
render ? 안에 들어가있는 jsx(html)요소들을 DOM 에다가 알맞게 넣어서 화면 보여주는것
ONLY React
React 실행 순서 : constructor 실행 -> render -> (update) -> componentDidMount
React 끝내기 : 바로 componentWillUnmount
USING React HOOK
React 실행 순서 : constructor 실행 -> render -> (update) -> useEffect (componentDidMount)
//useState("") 이게 class react에서 쓰이는 constructor(props) 안에 있는 this.state={name : ""}; 이다.
const [Name, setName] = useState("")
//here is componentDidMount
useEffect(()=>{
},[])
React Class React function
REDUX
Redux
상태 State를 관리를 해주는 툴
Redux 에서 Store ? State를 전체적으로 감싸주고 있는 역할 + 모든 state를 관리하는 역할, 객체형식의 액션만 받는다.
redux-promise & redux-thunk : 리덕스를 잘 쓸수있게 도와주는 middleware 역할
redux-thunk : store의 dispatch 한테 function 을 받는 방법을 알려줌
redux-promise : store의 dispatch 한테 promise 를 받는 방법을 알려줌
구글 리덕스 익스텐션 툴
chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related
<Provider store={createStoreWithMiddleware(Reducer,
window.__REDUX_DEVTOOLS_EXTENSION__&&
window.__REDUX_DEVTOOLS_EXTENSION__())}>
<App/>
</Provider>
'React & Next.js' 카테고리의 다른 글
useEffect & useCallback 정리 (0) | 2021.04.21 |
---|---|
React & Mysql 트위터 만들기 - front 편, NEXTJS / REDUX / SAGA /dummy data 만들기 (0) | 2021.04.19 |
React - Cors Issue & Proxy 설정 (0) | 2021.04.17 |
React & Nodejs & MongoDB - Blog Setting & Login & Register (프런트 + 백엔드) (0) | 2021.04.17 |
React & Nodejs & MongoDB - 쇼핑몰 만들기 & error 잡기 (0) | 2021.04.15 |