React

[kgneng2]

생명주기

초기화

• constructor()
• static getDerivedStateFromProps() : 이전속성값을 상태값에 영향으로 줘서 사용해야할때 씀.
• render()
• componentDidMount() : 여기서 API를 호출해야함. setState 메서드가 마운트 이후에만 동작하기 때문이다.

업데이트

• static getDerivedStateFromProps()
• shouldComponentUpdate() : 성능최적화를 위해 존재, true 면 render 되지만, false면 멈춘다.
• render()
• getSnapshotBeforeUpdate() : 업데이트 되기전에 스냅샷을 가져옴
• componentDidUpdate() : 실제 돔이 새로운상태로 변경된 상태임

hook

• useState() 사용시, setState 를 이용해서, state가 변경되었을때 , render가 다시 이뤄진다. componentDidMount는 최초 랜더링시 한번 이뤄진다.
• useEffect(componenetDidUpdate(), componenetDidMount(), componenetWillUnMount()를 모아둔것, )는 사용시, update에 해당한다. rendering되고, componentDidUpdate() 가 진행된다.

[kgneng2]

Redux

Action

// action생성자 함수
function addTodo({title, property}){
  return { type: 'todo/ADD', title, property}
}

• 내가 생각하기엔 함수 정의 prototype

invoke action

store.dispatch(addTodo(titile,property))

middleware

• reducer가 action을 처리하기 전에 실행되는 함수
• 디버깅 목적으로 상탯값 변경시 로그 출력
• reducer exception 을 서버에 전송하는 등 활용가능

const middleware = store => next => action => next(action)

const store =createStore(myReducer, addMiddlewarre(mi1,mi2...) 요런식으로 추가할수 있음.

reducer

• 액션이 발생했을때 새로운 상태값을 만드는 함수

function reducer(state = INITIAL_STATE, action) {

  switch(state) : {
  //action 정의

 }
}

• createReducer를 이용해서 reducer를 만들수 있음.
• action function 을 정의하는 함수.

store

• 리덕스의 상태값을 가지는 객체
• 액션이 발생(dispatch)하면 미들웨어 함수를 실행하고, 리듀서를 실행해서 상탯값을 새로운 값으로 변동.
• 요건 application 당 한개만 있어야한다

[kgneng2]

mapStateToProps() 함수에서 return 된 값이, 해당 컴포넌트의 props로 들어간다. 이 mapStateToProps함수를 마지막 줄 connect의 첫 번째 인자로 넣어줘야 한다.

우선 이 mapDispatchToProps()함수도 mapStateToProps() 함수처럼 리턴된 값이 props로 넘어간다.

참고: https://helloinyong.tistory.com/109