[React] state

state: 컴포넌트 내부에서 바뀔 수 있는 값
1. 클래스형 컴포넌트의 state
2. 함수형 컴포넌트에서 useState에서 사용하는 state

💡 props와 state 차이?

• props: 부모 컴포넌트가 설정하는 값. 컴포넌트 자신은 읽기전용으로만 사용
  - 부모 컴포넌트에서 props를 바꿔야 바뀜
  - 부모 컴포넌트의 state를 자식 컴포넌트의 props로 전달하고,
  자식 컴포넌트에서 특정 이벤트가 발생할 떄 부모 컴포넌트에서 메서드를 호출하면 props도 유동적으로 사용할 수 있음!

배열 비구조화 할당

• 객체 비구조화 할당과 비슷

const array = [1,2];
const [one, two] = array;

useState

• useState 함수의 인자에는 상태의 초깃값을 넣어준다.
• 함수를 호출하면 배열이 반환된다.
  • 첫번째 원소: 현재 상태
  • 두번째 원소: 상태를 바꾸어주는 함수 (Setter 함수)

const [message, setMEssage] = useState('');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히가세요!');

• useState는 한 컴포넌트에서 여러 번 사용할 수 있다.

const []color, setColor] = useState('black');
...

return (
	<h1 style={{color}}</h1>
	<button style={{color:'red'}} onClick=(()=>setColor('red')}>빨간색</button>
	<button style={{color:'green'}} onClick=(()=>setColor('green')}>초록색</button>
	<button style={{color:'blue'}} onClick=(()=>setColor('blue')}>파란색</button>
)

state 주의사항

• state 값을 바꿔야할 때는 setState 혹은 useState를 통해 전달받은 세터함수를 사용해야한다.
• 배열이나 객체를 업데이트해야할 때는 어떻게 해야할까?
  • 배열이나 객체 사본을 만들고, 그 사본에 값을 업데이트
  • 그 사본의 상태를 setState 혹은 세터함수를 통해 업데이트
• 객체 다루기

const object = {a:1, b:2, c:3};
const nextObject = {...object, b:2}; // 사본을 만들고 b 값만 덮어쓰기

• 배열 다루기

const array = [
	{id:1, value: true}, 
	{id:2, value: true},
	{id:3, value: false}
];

let nextArray = array.concat({id:4});
nextArray.filter(item => item.id!==2); // id가 2인 항목을 제거
nextArray.map(item => (item.id ===1 ? {...item, value:false} : item));
// id가 1인 항목의 value를 false로 설정

출처: <리액트를 다루는 기술> 3장