250519 월 REACT component, 가상 DOM, STATE
가상 DOM (Virtual DOM)
화면 변경시 실제 DOM을 바로 업데이트하지 않고, 실제 DOM을 복사해둔 데이터를 저장후 수정시 변경되는 UI NODE 일부분(최소)만 적용시켜 렌더링한다
- 빠르다!
component
- 함수형 컴포넌트
- 클래스형 컴포넌트
단방향 데이터 흐름
-
React에서는 데이터가 부모에서 자식으로만 흐른다는 특징이 있는데, 이를 말함
-
부모 컴포넌트는 prop를 통해 데이터를 자식에게 전달하고, 자식 컴포넌트는 props를 받아서 UI를 생성하거나 처리한다.
STATE(상태)
- component 내부 변수
- component(ex) thymeleaf 같은 UI node등..)의 현재 상태를 나타냄
- UI의 동적인 변화를 반영하는 데 사용
- state 가 변경되면 해당 컴포넌트를 와 자식 컴포넌트를 다시 렌더링
상태 변경의 규칙
- 상태 변수를 직접 수정 불가
- 자동 리렌더링 불가.- 꼭 setter함수를 이용할것!
- 비동기적으로 동작
- setState나 setCount 호출은 비동기적으로 처리되므로, 사용 바로 직후 변경된 값 확인 불가
props - prop로 상태값을 자식 컴포넌트에게 물려줄수 있다.
기타
JSX - (JavaScript Xml)
- JavaScript에서 html을 작성할수 있는 특별한 문법
React Hooks
- 함수형 컴포넌트에서 state와 React의 생명주기(lifecycle) 를 사용할수 있게 해주는 API
