2022년 5월 31일 리덕스

배운것

React

React Redux의 흐름

리덕스와 컴포넌트 연결 *useDispatch(수정해줘) ,useSelector(갖다쓸게)

- action을 부른다 *???

- reducer *새로운 상태값 만들어 반환

- store *reducer (+ options)들을 combine 하여 createStore

- 컴포넌트에서 데이터 사용

 

useRef

useRef를 쓰는 이유는 관리하는 변수 값이 바뀐다고해서 컴포넌트가 리렌더링되지 않기 때문입니다. 고유한 값을 설정해야할 떄 유용합니다(이를테면 id 값을 설정 할 때).리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있습니다.

 

이 변수를 사용하여 다음과 같은 값을 관리 할 수 있습니다.

• • setTimeout, setInterval 을 통해서 만들어진 id
  • 외부 라이브러리를 사용하여 생성된 인스턴스
  • scroll 위치

배열 추가, 삭제, 변경 -> 불변성 유지

 

useEfect

deps 안 썼을 때

매 렌더링마다 함수 실행

 

deps가 빈배열일 때

첫 렌더링때만 힘수 실행. (componentDidmount처럼 실행!이 되지만 이것은 버그가 있는 편법이다.)

최신 상태로 업데이트가 이루어지지 않고 무한 루프를 돌게된다.

참고 https://simsimjae.tistory.com/401

 

deps 안에 값이 있을 때

deps에 넣은 값이 업데이트 되었을 때 함수 실행(componentDidUpdate처럼 실행)

 

컴포넌트가 사라질 때

Clean up함수 - Return 안에서 실행(componentWillUnmount처럼 실행)

 

*useEffect가 어느정도 이해되면 보아라

 

아쉬운 것

• 모르는거 계속 잡는 것 보다 2번 보는게 낫다