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

Redux DevTools

  <Provider store={createStoreWithMiddleware(Reducer,
                window.__REDUX_DEVTOOLS_EXTENSION__&&
                window.__REDUX_DEVTOOLS_EXTENSION__())}>
    <App/>
  </Provider>