State

State란?

컴포넌트 내부에서 바뀔 수 있는 값.

 

useState 함수로 state를 만든다.

state를 만들어주는 리액트에서 제공하는 기능.

 

사용법

const [ value, setValue ] = useState( 초기값 )

초기값을 initial state 라고 부름

 

이벤트 핸들러

function onClickHandler() {
	console.log("");
}

 

---

useState + onChange Event

 

1. Input과 state 구현하기

    Input에서는 보통 사용자가 입력한 값을 state로 관리하는 패턴을 많이 씀

 

 

불변성 

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

원시 데이터는 불변성이 있고, 객체, 배열, 함수는 불변성 없음

 

리액트에서는 원시데이터가 아닌 데이터의 불변성을 지켜주는 것을 중요시 함

-> 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인함.

    state의 메모리 주소를 비교함. 즉, 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고,

    직접 수정을 가하면 값은 바뀌지만 메모리 주소는 변함 x

 

불변성 지키기 예시

직접 수정을 가하지 않고 전개 연산자를 사용해서 기존의 값을 복사하고,

그 이후에 값을 수정하는 식으로 구현

 

---

순수함수

 

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

즉, 같은 input동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수(코드 블록)

// 매개변수를 복사한 값을 변경하는 순수함수
const addSixPure = (arr) => {
  // 펼침 연산자로 새로운 배열에 6 추가
  newArr = [...arr, 6];
  return newArr;
};

 

순수함수가 아닌 것

const num_arr = [1, 2, 3, 4, 5];

// 매개변수의 값을 직접 변경하는 불순함수
const addSixImpure = (arr) => {
  // 매개변수에 직접 6 추가
  arr.push(6);
  return arr;
};

 

 

1. 컴포넌트의 많은 루틴을 순수 함수로서 작성하기를 요구함

• 컴포넌트에서 state와 props가 같으면, 항상 같은 값을 반환해야함
• 다른 Side effects를 발생시키지 않아야 함. (HTTP 요청, 데이터 저장, 쿠키 조작 등)

2. 컴포넌트의 상태값은 불변 객체(Immutable Object)로 관리해야 함

• 수정할 때에는 기존 값을 변경하는 것이 아니라, 같은 이름의 새로운 객체를 생성

3. 이를 통해, UI 개발의 복잡도를 낮추고, 버그 발생 확률도 줄임

   + 같은 입력에 대해 항상 같은 출력을 보장하니, 테스트 하기도 훨씬 수월