props와 state
앞서 리액트 개념 강의에서 리액트는 컴포넌트 기반 구조라는 점을 살펴봤다.
이렇게 조각조각 나눠진 컴포넌트끼리 데이터를 전달하고 싶을 때 사용되는 것이 바로 props이다.
props는 속성을 뜻하는 properties의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 수단이다.
(단방향 데이터 흐름을 갖고 있으니 당연히 자식 컴포넌트에서는 부모 컴포넌트로 props를 보낼 수 없다.)
그럼 전달받은 데이터를 컴포넌트 안에서 변경해서 사용하고 싶을 때는 어떻게 해야 할까?
이때 사용되는 것이 state이다.
함수형 컴포넌트에서는 state를 사용하기 위해 useState라는 리액트 내장 함수를 쓴다.
사용하는 방법은 아래와 같다.
const [현재 상태, setter 함수] = useState('state의 초기값')직접 수정이 불가능한 state를 setter 함수를 사용해 새로운 참조를 만들어 state의 상태를 업데이트하고,
참조 비교를 통해 변경 사항을 감지하면 컴포넌트는 리렌더링된다.
(setter 함수명은 state의 이름 앞에 set을 붙여 정의하는 것이 관례라고 한다.)
❗state의 불변성
state는 직접적으로 수정할 수 없다.
state가 업데이트되면 컴포넌트는 리렌더링된다고 했다. 리액트는 이러한 변화를 감지하기 위해 이전 state와 업데이트된 state를 참조 비교한다.
let array1 = [1, 2, 3];
let array2 = [1, 2, 3];
let array3 = array1;
console.log(array1 === array2); // false, 같은 내용이지만 다른 메모리 위치 참조
console.log(array1 === array3); // true, 동일한 메모리 위치 참조위와 같이 참조 비교는 두 객체가 같은 메모리 위치를 가리키고 있는가를 확인하는 것이다.
(내용이 같은지 여부를 비교하는 것이 아님)
따라서 불변성을 유지하지 않으면 리액트가 변화를 감지할 수 없으므로, useState를 통해 새로운 참조를 생성하여 변경 사항을 감지시키는 것이다.
