React Props, State

Props

---

• 컴포넌트에 원하는 값을 넘겨줄 때 사용
• 넘겨줄 수 있는 값 => 자바스크립트의 요소라면 제한X (변수, 함수, 객체, 배열 등)
• 주로 컴포넌트의 재사용을 위해 사용

✅ Props는 읽기 전용이다.

const Welcome = (props) => {
  // (X) Props 값 임의로 변경하지 말기!
  props.name = props.name + "님"; 
  return <h1>Hello, {props.name}</h1>;
  
  // (O) 새로운 변수 생성해서 사용하기!
  const username = props.name + "님"; 
  return <h1>Hello, {username}</h1>;
}

✅ DOM Element의 Attributes

1. camel case로 작성

• tabIndex, className 등
• data- or aria- 로 시작하는 attribute는 예외 (data-type, aria-label 등)
  
  

2. HTML의 attribute와 다른 이름을 가지는 것들이 있음

• class -> className
• for -> htmlFor
  
  

3. HTML의 attribute와 다른 동작 방식을 가지는 것들이 있음

• checked (defaultChecked), value (defaultValue)

(<input type="checkbox" checked={false} />)

HTML -> 초기값으로 사용됨
React -> 현재값을 의미함

React에서 초기값의 의미로 사용하고 싶다면 defaultChecked, defaultValue를 사용

4. React에서만 쓰이는 새로운 attribute가 있음

• key : 엘리먼트에 안정적인 고유성 부여를 위해 배열 내부의 엘리먼트에 지정해야함
  (두 개의 다른 배열을 만들 때 동일한 key 사용 가능)

const Names = () => {
  const names = [
    {key: '1', value: '민수'},
    {key: '2', value: '영희'},
    {key: '3', value: '길동'},
  ]
  
  return (
    <div>
      {names.map((item) => (
      	<li key={item.key}>{item.value}</li>
      ))}
    </div>
  )
}

State

---

• 컴포넌트 내에서 유동적으로 변할 수 있는 값을 저장
• state 값 변경 -> 재렌더링 필요한 경우 React가 자동으로 계산하여 리렌더링

✅ State 값을 직접 변경하지 말 것!

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>버튼을 {count}번 눌렀습니다.</p>
	  // (X) 직접 변경 NO!
	  <button onClick={() => {count = count + 1;}>
      // (O) 반드시 setState 함수를 이용해 값을 변경!
      <button onClick={() => setCount(count + 1)}>
      클릭
      </button>
    </div>
  );
}

✅ State 변경 방법

1. setState 내에 변경할 값 넣기

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

setCount(count + 1);

2. setState에 함수 넣기

• 현재 값을 기반으로 State를 변경하고자 할 때 권장됨

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

setCount((current) => {
	return current + 1
})

✅ Object를 갖는 state를 만들 때 주의하기

const [user, setUser] = useState({name: "민수", grade: 1})

setUser((current) => {
  current.grade = 2;
  return current;
})

위와 같이 object를 갖는 state도 만들 수 있지만 객체 자체가 변경되지 않으면 React는 state의 변경을 감지하지 못한다.

따라서 기존 객체의 내용을 새로운 객체에 담아 변경해준 후 return 해줘야 한다.

const [user, setUser] = useState({name: '민수', grade: 1 })

setUser((current) => {
  const newUser = { ...current }
  newUser.grade = 2
  
  return newUser
})