[리액트 입문주차] 1-14 불변성과 순수함수

1-14 불변성 & 순수함수

1. 생명주기

Mount - Update - Unmount

랜더를 통해 떠오르고, 갱신되고 죽는 과정 

2. 불변성

- 메모리에 있는 값을 변경할 수 없는 것

- 원시데이터(숫자, 문자, 불리언 등)는 불변성이 있다

- 원시데이터가 아닌 것(객체, 배열, 함수 등)들은 불변성이 없음

- 불변성이 있다는 것 => 값을 수정해도 메모리에 저장된 값에는 변화가 없음. 다시 메모리 공간 생성하여 재할당

- 불변성이 없다는 것 => 주소값을 저장하기 때문에 값을 수정하면 메모리는 그대로 있고 내용만 바뀜

3. 리액트의 렌더링

- 컴포넌트가 화면에 그려지기 위해서 렌더링을 함

- 랜더링의 조건? state 값의 변화

- state값이 변화하면 감지하여 화면을 리렌더링 해줌

- 렌더링 할지를 state의 변화에 따라 결정

- 단순 변수는 무시

4. 리액트와 불변성

- state가 바뀌었는지 확인하려면 가리키는 메모리 주소가 바뀌는지 확인해야하는데, 원시데이터가 아닌 값들을 state로 지정하면 state가 변화하지 않음

<비원시데이터 불변성을 지켜주는 방법>

- 전개 연산자 '...' 사용

- 불변성을 지켜주기 위해 직접 수정하지 않고, 전개 연산자를 통해 기존 값을 복사하고 그 이후에 값을 수정

import React, { useState } from "react";

function App() {
  const [dogs, setDogs] = useState(["말티즈"]);

  function onClickHandler() {
	// spread operator(전개 연산자)를 이용해서 dogs를 복사합니다. 
	// 그리고 나서 항목을 추가합니다.
    setDogs([...dogs, "시고르자브르종"]);
    
    // 원 객체를 수정한 후, 수정된 값을 복사하여 set해주기
    dogs.push("시고르자브종");
    const dogs2 = [...dogs];
    setDogs(dogs2);
  }

  console.log(dogs);
  return (
    <div>
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

- 즉 복사한 내용은 같기때문에, 기존 데이터에 값을 수정한 후 복사한 값을 set해주어 기존 데이터와 비교해 달라진 값을 인지할 수 있도록 해 줌

5. 순수함수

- 하나 이상의 인자를 받고, 변경하지 않고 참조하여 새로운 값을 반환하는 함수

- 같은 인자가 전달되면 항상 동일한 결과를 반환하는 함수

- 순수함수의 필요성

> 컴포넌트의 많은 루틴을 순수함수로서 작성하기가 요구됨

> state와 props가 같으면 항상 같은 값을 반환해야 함

>  다른 Side Effects를 발생시키면 안 됨

> 컴포넌트의 상탯값은 불변 객체로 관리해야만 함

> 수정 시 기존 값을 변경하면 안되고, 같은 이름의 새로운 객체를 생성하여 바꿔주고 그 값을 반환해야 함 

> UI개발의 복잡도, 버그 발생 확률 감소