[React] State 정리

※ State (상태값)

- 리액트에서 컴포넌트의 화면 출력 (rendering)을 담당하는 중요 정보값을 담는 그릇
- 컴포넌트 안에서 State 값이 변경되면 해당 컴포넌트 화면이 자동으로 reRandering 됨 (함수가 재 호출)

※ State 사용법

- 리액트로 부터 useStat라는 state 생성해주는 전용 기능을 import (hook) : hook은 무조건 컴포넌트 함수 내부에서 호출 되어야 함
- useState 함수를 통해서 State와 State를 변경해주는 함수를 비구조화 할당상으로 받음
- 해당 State값을 무조건 State전용 변경함수를 통해서만 변경 가능
- useState는 배열값을 리턴 [인수로 전달한 값을 state 담아서 첫번째 값 , 해당 state를 변경 할 수 있는 전용 함수]
const [IsPop,setIsPop] = useState(false);
- uss 클릭하고 useStateSnippet 선택하면 자동 구문 완성
- State를 onClick에 넣으려면 () => 로 화살표 함수로 넣어야지만 무한루프를 타지 않는다.

- 자식 컴포넌트로 useState를 보내기
부모 - 자식 컴포넌트로 setIsPop State 변경 함수를 prop으로 전달
{IsPop && <Popup setIsPop={setIsPop} />}

자식 - 자기 자신을 닫아주는 State가 자기가 아닌 부모 컴포넌트를 있으므로 부모 컴포넌트로 부터 State 변경 함수를 props로 전달받아 호출
function Popup({ setIsPop }) {
- state에 담기는 정보 값이 원시형이 아닌 배열이나 객체같은 참조형 자료이면 무조건 전개연산자로 복사본을 만들어서 변경 처리 (불변성유지)
- React에서 state에 불변성을 유지하는 이유는 원본과 바뀔 복사본을 비교 대조해서 화면을 ReRandering 하기 때문

※ State에 선언된 배열을 쓰기

- 기존에 선언된 배열의 부분값만 변경하면 변경이 되지 않고, 배열을 copy한 뒤 한번에 바뀌어야지만 변경이 가능함.
EX) const [Colors, setColors] = useState(['red', 'green', 'blue']);

//기존의 colors에 들어가 있는 참조형 자료인 배열 값을 Deep Copy
const newColors = [...Colors];
//원본은 유지한채 복사가된 배열값을 변경
newColors[2] = 'aqua';
//변경된 복사된 배열값을 state 변경 함수로 변경 처리
setColors(newColors);