[react]리액트 되돌아보기 2

자바스크립트 원시값 메모리에 정해져있음 변수에 다른값 할당하는게 메모리공간의 값을 변경하는 것은아임 다만 변수가 가리키는 메모리공간을 바꿈 그리고 나중에 안쓰는 메모리 공간은 가비지 컬렉터가 없앰

 

참조형자료같은경우는 메모리공간 자체를 바꿈 

그래서 비교할때 내용이 변경되도 메모리 주소자체는 변경되지않아서 변경감지가 안됨

 

이러한 특징들을 원시형은 immutable 하고 참조형자료는 mutable 하다고 한다.

 

근데 리액트에서는 이전스테이트와 현재스테이트(setstate) 한 값을 비교해서 다르면 리렌더링을 함 setstate 한다고 무조건 적으로 리렌더링 하지는 않음

 

이러한 특징들 때문에 리액트에서 참조형자료를 스테이트로 다룰때 immutable 하게 다뤄주는게 좋다 변경사항이 있을때는 자료를 복사해서 그값을 변경하고 set 해줌으로써 변경사항을 리액트가 감지할수 있게 관리 해주어야 한다.

 

메서드들이 이뮤터블한건지 뮤터블 한건지 생각하면서 써야됨

 

useEffect 외부변화시 감지되서 실행되는 함수랑 클리어함수 사용하면 디바운싱 느낌도 구현가능하네

hooks 플로우 > 이니셜렌더 > 렌더 > 업데이트 > 페인트 > 클린업이펙트 > useEffect

중간에 layoutEffect 도 있는데 그냥 이펙트하고 똑같은데 순서가 페인트 전에 한번 있다고 생각하면 될듯

그니까 클린업 함수는 컴포넌트가 언마운트되거나 다음 useEffect 이전에 사용 두가지 상황에서 실행 됨

 

useReducer 사용하면 setState 대신에 dispatch 를 받아오고 useReducer 안에 reducer 함수 를 받음 reducer 함수는 첫번째 인자에는 이전 state 를 받고, 두번째 인자로는 action 을 받아오는데 이때 action 은 dispatch 에 인자로 전달되는 값이다.

리덕스 패턴을 state 에 사용하는 건데 복잡한 부분이 반복이 되는 경우에는 유용할수 있는데 그냥 복잡한 경우에는 리덕스 쓸듯 덕스패턴 별로 안좋아 하기도 하고 일단 있다는 건만 인지하고 있어야지 

 

useRef 의 특징 

컴포넌트내의 변수는 리렌더시 값이 초기화됨

그래서 state 라는 걸 이용하여 변화되는 값들을 보유함 근데 이 state 는 변화할때마다 리렌더링을 유발시킴

그럼 나는 리렌더가 필요없는 변화를 리렌더시에도 값을 유지하면서 관리하고 싶다면 어떤걸 사용할까??

이때 사용하는게 useRef 의 첫번째 역할

 

두번째 역할은 dom 에 접근하는거 두가지 역할이 있으니까 인지하고 있자