가상DOM
트리 구조인 Dom 에서 하나의 하위 항목을 수정할때마다 모든 데이터를 찾는 방식은 비효율적이다. 따라서 메모리위에서만 존재하는 가짜 DOM이 존재.
- 동작방식 : 어떤 작업을한 가상 DOM을 기존 DOM 과 비교하여 업데이트된 부분만 갈아끼워주는 방식
라이프사이클
컴포넌트는 Mount -> update ->unmount 순서로 된다
render : 가상Dom 에서 Dom으로 변경사항을 올리는 행위
render가 완료된것을 mount 됐다고 한다.
새 업데이트가 일어나는 경우
- new props : 부모 컴포넌트가 자식 컴포넌트에 주는 데이터
- setState() : 내가 가진정보가 바뀌었을 때
- forceUpdate() : 강제로 수정시킬 때
- 부모컴포넌트가 수정될때
클래스형 컴포넌트와 함수형 컴포넌트
요즘은 함수형 컴포넌트로 많이 쓰고 있는 추세이지만 이미 만들어져있는 프로젝트들이 클래스형 함수로 만들어진것들도 있음으로 생김새는 알아야 한다.
1) 클래스형 컴포넌트
- 컴포넌트가 만들어질 때 리액트 상위 클래스 객체를 확장하여 선언된다. 그만큼 기능을 가져오기 쉬워져 라이프싸이클 메서드를 사용함에 간편하다.
2) 함수형 컴포넌트
- 컴포넌트 생성할 때 props 를 건네 받기만 한다. 특정 함수가 필요하다면 라이프싸이클이 아닌 리액트 훅을 이용하여 특정 메서드를 구현한다.
함수형 컴포넌트에서 라이프싸이클을 대신하는 Hooks
1) useState
state를 추가해주는 hook이다. state는 화면과 관련된 데이터를 다룰 때 쓴 다.
- 선언방법
2)useEffect
컴포넌트가 렌더링이 될때마다 어떤 함수를 실행한다.
리덕스란?
전역상태저장소 (상태=데이터)
데이터는 부모데이터에서 자식데이터로 흐르는게 제일 좋은데 부모데이터를 바꿔줘야 할 때 상태관리가 유용하다.
데이터는 부모데이터에서 자식데이터로 흐르는게 제일 좋기때문에 별도의 전역상태저장소만들어 state를 가져와 쓰면 자식데이터가 부모의데이터를 건드리지 않고 쓸수 있다. 또한 props drilling 상태에서도 쓰기 유용하다.
전역상태관리 흐름
- 전역으로 볼수 있는 데이터가 있다.
- 그데이터를 참조하려는 데이터가 있다.
- 참조하려는 데이터를 수정하려는 데이터가 있다.
- 데이터가 수정되면 나머지 저장소를 참조하려는 데이터들(구독한 데이터)도 수정된 값으로 데이터를 받는다.
리덕스 규칙
1) store는 1개만 쓴다.
2) store의 state는 오직 action으로만 변경할 수 있다.
- 가지고 있던 값을 수정하지 않고 새로운 값을 만들어서 상태를 갈아 끼우는 식으로 진행된다.
3) 어떤 요청이 와도 리듀서는 같은 동작으로 해야한다.
- 이전 상태는 수정하지 않고, 이전 상태와 액션을 파라미터로 받는다.
TIL 정리