TIL 231101 (React 기본_2)

1. React에서는 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 값을 전달함.

2. 별개의 컴포넌트 파일을 만들어 props로 값을 전달해줄 수도 있다.

3. state를 사용하는 이유는 UI를 변경하기 위해서다.

4. useState hook(기능)

5. 불변성 : 메모리 영역에서 값이 변하지 않는다.

원시데이터(숫자, 문자, 불리언) - 불변성이 없다. 값이 바뀌면 참조 주소가 바뀜.
참조데이터(함수, 객체, 배열) - 값이 바뀌어도 참조 주소가 그대로다. 스테이트가 참조하는 주소 안의 값만 변경된다.
리액트에서는 스테이트가 변경되어야 렌더링이 진행되기 때문에, 예를 들어 obj1 = aa 이고, 값을 변경하여 화면에 띄우고 싶다면 새로운 객체를 선언 후 값을 새로 할당하여야 한다.
새로운 참조값을 지정하여야 한다는 뜻이다.

6. 컴포넌트 상태 변화

• 트리거링
• 랜더링
• 커밋

UI - 음식

컴포넌트 - 음식을 만드는 주방장

리액트 - 웨이터

트리거링은 리액트가 UI를 컴포넌트에게 요청하는 과정이다.'랜더링 하게 조치해봐!' 라는 뜻이다.

랜더링은 주문을 받은 컴포넌트 주방장이 준비된 UI를 리액트에게 전달해주는 것을 말한다. 리액트 처음 실행, state 변경, props를 통해 새로운 컴포넌트 등이 들어올 때가 있다.

커밋은 만들어진 UI를 손님 테이블에 올려놓는 것을 말한다.
appendChild DOM API를 사용하여 생성한 모든 DOM 노드를 화면에 표시한다.
리렌더링에서 리액트는 DOM이 최신 렌더링 결과와 일치하도록 렌더링 중에 계산한 최소한의 필수 작업을 적용한다.