State

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

props

• 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값
• 컴포넌트는 props를 읽기 전용으로만 사용가능함

배열 비구조화 할당

• 객체 비구조화 할당과 비슷함
• 배열 값을 쉽게 사용 가능

const arr = [1, 2];
const a = arr[0];
const b = arr[1];

//아래와 동일한 코드

const [a,b] = arr;

useState 사용하기

Say.js

const Say = () => {
	const [message, setMessage] = useState("");
    const onClickEnter = () => setMessage("어서와");
    const onClickExit = () => setMessage("잘가");
    
    return(
    	<>
            <button onClick={onClickEnter}>enter</button>
            <button onClick={onClickExit}>exit</button>
            <h1>{message}</h1>
       </>
    );
}

export default Say;

App.js

const App = () => {
	return <Say />
}

• useState 호출 시 배열 반환
• 첫 번째 요소 : 현재 상태
• 두 번째 요소 : 상태를 바꿔주는 setter 함수

주의사항

• state 값 변경 시에는 useState, setState를 통해서만 변경
• 배열, 객체 업데이트 : 사본을 만들고 그 사본에 값을 업데이트한 후 세터 함수를 통해서 업데이트

객체의 경우 : spread 연산자 사용

const obj = {a:1, b:2, c:3};
const nextObj = {...obj, d:4};

배열의 경우 : 배열 내장함수 사용

const arr = [
	{id:1, value:true},
    {id:2, value:false},
];
let nextArr = arr.concat({id:3}); // 새 항목 추가
nextArr.filter(item => item.id != 2) // id가 2인 항목 제거
nextArr.map(item === 1 ? {...item, value:false} : item)); // id가 1인 항목의 value값 변경