3주차 주특기 입문

• 3주차 주특기 입문 주차에서는 TodoList를 만들었다.
• 이번 주차는 컴포넌트, props, state 개념을 이해하고 활용하는 주차 였다.

useState

리액트 컴포넌트에서 동적인 상태 값을 state 라고 부른다.
Hook이 도입되기 이전 클래스형 컴포넌트에서 편리하게 상태값을 관리할 수 있었지만 리액트 16.8 버전부터 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 잇게 됐다.
useState()는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 Hook이다.

setState로만 값을 변경해줘야 하는 이유 = 불변성 유지해야 하는 이유
값이 변경 되었다는걸 판단하기 위해 리액트는 객체로 저장된 state를 비교 연산한다.
객체 비교시 판단 근거는 객체의 메모리 주소인데 직접 값을 수정하면 메모리 주소가 동일하여 리액트는 변화를 감지하지 못한다.
상태 변경을 추적하고 변경에 따라 구성요소를 다시 렌더링하려면 setState를 사용해야 한다. map, filter, spread 문법을 사용해서 새로운 배열을 반환하라는 이유도 그것 때문이다.

Virtual DOM

• Virtual DOM은 DOM을 직접 조작하지 않고 변경사항을 하나의 가상 돔에 모아뒀다 한번에 DOM으로 보내는 기술이다.
  DOM의 연산 비용을 줄일 수 있는 방법

React는 에서는 가상돔을 사용하여 실제DOM의 변경 사항을 빠르게 파악하고 반영한다.
Virtual DOM 은 DOM이 생성 되기 전에 비교과정을 수행한다.

• 연산이 끝나고 최종 변화를 실제 DOM에 전달한다.

모든 변화를 하나로 묶어서 딱 한 번만 전달하기 때문에 레이아웃 계산과 리렌더링의 규모는 커지지만 DOM 연산의 횟수가 줄어든다.

Props

props는 properties의 줄임말로 부모컴포넌트에서 자식컴포넌트로 어떠한 값을 전달해줘야 할때 사용한다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;

부모컴포넌트 내부에서 코드를 작성하고 props를 활용하여 자식컴포넌트에서 props라는 예약어를 통해 받을 수 있다.

그러나 부모컴포넌트에서 자식의 자식 컴포넌트로는 한번에 전달을 할 수 없기 때문에 컴포넌트마다 props로 연결을 해줘야 한다. 그렇기 때문에 props drilling이라는 게 생길 수 있다.
그러므로 redux와 같이 전역에서 상태를 관리해주는 라이브러리를 통해 유지보수와 가독성을 높여 준다.