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번 보는게 낫다