인프런 [실전 리액트 프로그래밍] 강의를 듣고 공부한 내용을 정리합니다!
리액트 요소와 가상돔
리액트는 렌더링 성능을 위해 가상돔을 이용하여 실제 DOM이 변경되는 것을 최소화한다.
리액트 요소는 불변 객체.
console에 찍어보면 Object안에 여러 값들이 들어있는 것을 확인 할 수 있다.
리액트에서 데이터 변경에 의한 화면 업데이트는 렌더단계와 커밋단계를 거친다.
- 렌더단계 : 실제 돔에 반영할 변경사항을 파악함. 이때 가상돔을 이용하여 비교하게 된다.
- 커밋단계 : 파악된 변경사항을 실제 돔에 반영함.
리액트 요소가 렌더링 될 때 리액트 요소 트리가 생기고, 이를 가상돔으로 만든다. 이후 이전 가상돔과 비교해서 실제 DOM에 반영할 부분을 찾는 것이 렌더단계라고 할 수 있다.
리액트 훅(hook)
컴포넌트에 기능을 추가할 때 사용하는 함수이다.
클래스형 컴포넌트를 사용하지 않게 됨으로서 리액트 훅의 사용 빈도가 높아졌다.
useState: 상태값 추가useEffect: 부수효과 처리(서버API호출, 이벤트 핸들러 등록 등)
useEffect에 의존성을 추가하게 되면 의존성에 따라 렌더링이 됨.
훅은 항상 같은 순서로 호출이 되어야 한다. (if문, for문 등등에 같이 사용하지 말 것)
커스텀 훅을 만들어 사용할 수도 있다.
Kookmin Univ. CS