📝 Props란?

Component에 데이터를 전달하는 방식으로 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없다. (컴포넌트로 전달되는 매개변수)
주로 Component의 ‘재사용’을 위하여 사용한다

🎯 Props의 특징?

• 컴포넌트에 전달되어 사용된다. (함수의 매개변수처럼 사용)
• Props는 읽기 전용이다. Props의 값을 변경해서 사용하고 싶다면 새로운 변수를 생성해야한다.
• React Attribute는 현재 값을 의미한다. 초기값의 의미로 사용하려면 defaultValue, defaultChecked로 설정해야한다.
• key는 React에서 사용하는 새로운 Attribute이다.

  Key
  1) React가 어떤 항목을 변경, 추가 또는 삭제할지
  식별하는 것을 돕는다.
  2) 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 한다.
  3) Key는 배열 안에서 형제 사이에서 고유해야 하고 전체범위에서 고유할 필요는 없다.
  4) key 속성이 없으면 출력은 정상적으로 되지만 콘솔에 경고가 발생한다. React가 배열을 순회하며 생성된 각 컴포넌트를 구별할 수 없기 때문이다.

• 반드시 부모 컴포넌트에서 상속 받아야 한다. 자식에서 부모로 전달할 수 없다.

---

📝 state?

State는 Component 내에서 유동적으로 변할 수 있는 값을 저장한다.

🎯 state 특징

• State는 컴포넌트 안에서 관리된다. (함수 내에 선언된 변수처럼 사용)
• 개발자가 의도한 동작에 의해 변할 수도 있고
  사용자의 입력에 따라 새로운 값으로 변경될
  수도 있다.
• State 값이 변경되고 재렌더링이 필요한 경우
  에 React가 자동으로 계산하여 변경된 부분을 렌더링한다.
• State 값을 직접 변경하게 되면 React가
  Component를 다시 렌더링할 타이밍을
  알아차리지 못한다. 반드시 setState 함수를 이용해 값을 변경해야한다.

state 변경 방법

1) setState내에 변경할 값 넣기

const [count, setCount] = useState(0);
setCount(count + 1)

2) setState에 함수 넣기

const [count, setCount] = useState(0);
setCount((current) => {
	return current + 1
})

• 함수를 넣는 경우 함수가 반환(return)하는 값으로 State가 변경된다.
• 현재 값을 기반으로 State를 변경하고자 하는 경우 함수를 넣는 방법을 권장한다.

❗❗ Object를 갖는 State를 변경할 때 주의할 점

const [user, setUser] = useState({name: "민수", grade: 1})
setUser((current) => {
	current.grade = 2; // ----> X
	return current;
})

user object 안의 grade를 바로 변경하게 되면 grade는 변경되었지만 user 자체는 변경되지 않았기 때문에 변경된 것을 감지하지 못한다.

const [user, setUser] = useState({name: '민수', grade: 1 })
setUser((current) => {
	const newUser = { ...current }
	newUser.grade = 2 // ----> O
	return newUser
})

기존 user의 내용을 새로운 object에 담고 grade를
변경해야한다.

Props vs State

Props와 State의 가장 큰 차이로 Props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값으로 자식 컴포넌트에서는 Props를 직접 수정할 수 없지만 State는 컴포넌트 내부에서 선언하며 내부에서 관리되는 값으로 값을 변경할 수 있다는 점이 있다.

따라서 값이 변경되어야하는 상황, 예를 들면 매초 변하는 시간을 출력해야 하거나 버튼 클릭시 값이 변하는 것을 출력해야 한다면 State를 사용해야 한다. Props는 읽기 전용으로 수정이 불가능하고, State는 원하는 경우 수정이 가능하기 때문에 상황에 따라 알맞은 것을 사용하면 된다.