리액트 입문주차 복습 겸 정리!!!
🍎 state
컴포넌트 내부에서 바뀔 수 있는 값을 의미.
바뀌어야 하는 이유. UI(엘리먼트)로의 반영을 위해.
State를 만들 때는 useState()를 사용한다.
State를 변경할 때는 setValue(바꾸고 싶은 값)를 사용한다.
🍎 불변성
불변성이란 메모리에 있는 값을 변경할 수 없는 것.
자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고,
원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없다.
왜 리액트에서는 원시데이터가 아닌 데이터의 불변성을 지켜주는 것을 중요시할까?
리액트에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화 전, 후의 메모리 주소를 비교한다.
리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리 주소는 변함이 없게 된다.
즉, 개발자가 값은 바꿨지만 리액트는 state가 변했다고 인하지 못하게 된다.
결국 마땅히 일어나야 할 리렌더링이 일어나지 않게 된다.
🍎 Component & Rendering
🌳 Component
리액트의 핵심 빌딩 블록 중 하나.
리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성된다.
컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어준다.
UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체이다.
명령형은 어떻게(How)를 중요시 여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태
선언형은 무엇(What)을 중요시 여겨서 제어의 흐름보다는 원하는 목적을 중요시 여기는 형태
**DOM (명령형 프로그래밍)** 코드가 길어지면 실수가 나올 수 있고 관리하기가 어려워짐.
리액트 (선언형 프로그래밍)
직관적이기 때문에 관리하기가 쉬워진다.
🌳 렌더링
컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미.
1.렌더링 일으키는 것 (triggering)
- 첫 리액트 앱을 실행했을 때
- 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때.
컴포넌트 내부 state가 변경되었을 때
컴포넌트에 새로운 props가 들어올 때
상위 부모 컴포넌트에서 위에 두 이유로 렌더링이 발생했을 때
2.렌더링한다는 것 (rendering)
3.렌더링 결과는 실제 DOM에 커밋한다는 것 (commit)
