[리덕스] 기본정리

hoya.a·2022년 4월 17일
0

리액트

목록 보기
2/4
post-thumbnail

state와 ref의 차이점

state : 값 바뀔때마다 리렌더링이 된다.

ref : 리렌더링이 되지 않는다.

  • ex) 로그인,회원가입의 경우 사용

props : state는 컴포넌트 내의 함수로 값을 수정할 수 있지만props는 부모컴포넌트에서 받아오는 값으로 값을 수정할 수 없다.

라이프사이클

리액트의 컴포넌트는 라이프사이클이라 불리는 수명주기가 존재
위의 그림처럼 mounting(생성)-updating-unmounting(제거) 이다.

  • mounting : DOM이 생성되고 웹 브라우저 상에 나타나는 것을 뜻함
  • updating : 다음과 같은 4가지 상황에서 업데이트가 발생
    • props가 바뀔 때
    • state가 바뀔때
    • 부모 컴포넌트가 리렌더링 될 때
    • 강제로 렌더링을 트리거할 때
  • unmounting : DOM에서 제거 되는 것을 뜻한다.

라이플사이클은 9가지가 존재 하지만 필요한것만 정리 할게용..

  1. constructor(생성자)
  • 클래스형 컴포넌트를 만들 때 처음으로 실행. 이 메서드에서는 초기 state를 정할 수 있다.
    함수형 컴포넌트에서는 useState를 사용하면 초기 상태를 쉽게 설정할 수 있다.
  1. componentDidmount
  • 이 메서드는 컴포넌트를 만들고 첫 렌더링을 마친 후 실행. 함수형 컴포넌트에서는 uesEffect를 활용하여 구현.
  1. componentDidUpdate
  • 이메서드는 리렌더링을 완료한 후 실행. 함수형 컴포넌트에서는 useEffect를 활용하여 구현
  1. componentWillUnmount
  • 이 메서드는 컴포넌트를 DOM에서 제거할 때 실행된다. componenetDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야한다. 함수형 컴포넌트에서는 useEffect를 활용하여 구현.

리덕스 데이터 흐름

내가 이해한 흐름도..

컴포넌트가 수정할것이 생기면 dispatch(액션을 파라미터로 전달)를 ActionCreater에 보낸다 그러면 ActionCreater가 실행할 Action을 단순히 파라미터를 받아와서 액션 객체 형태로 만들어 리듀서에 보내고 리듀서 함수는 액션을 참고해 새로운 상태를 만들어 스토어를 구독하고 있는 컴포넌트에 수정된 정보를 전송한다.

만약 서버와 통신하고 있는 경우 컴포넌트는 미들웨어를 통해 서버와 request, response를 통해 정보를 주고 받는다.

profile
TIL 정리

0개의 댓글