State & 렌더링(Rendering)

State

컴포넌트의 내부에서 변경될 수 있는 값

사용 방법

useState hook을 사용 (hook : 기능)

// 초기 설정
const [변수명, set변수명] = useState("초기값")

변경 방법

1. onClick, onChange 등의 이벤트를 발생시킴
2. 해당 이벤트의 이벤트 핸들러로 set변수명("변경할 값")를 설정함

function App() {
  const [name, setName] = useState("초기 이름")
  const [value, setValue] = useState("");
  
  const onClickHandler = () => {
    setName("변경된 이름");
  }
  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  }
  
  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
      <button onClick={onClickHandler}>{name}</button>
    </div>
  )
}

---

렌더링(Rendering)

React에서 컴포넌트를 화면에 출력하는 방식

동작 방식

• 렌더링 유발(Triggering) → 렌더링 수행(Rendering) → 렌더링 결과를 DOM에 반영(Commit)

렌더링 발생(Trigger) 조건

1. 첫 React 앱을 실행한 경우
2. 현재의 React 내부에서 state의 변경이 발생한 경우
   2-1. 부모 컴포넌트의 state가 변경된 경우
   2-2. 자식 컴포넌트의 state가 변경된 경우
   2-3. 컴포넌트에 새로운 props가 들어온 경우

주의사항

• React에서는 state가 변화했을 경우에만 리렌더링(Re-Rendering)을 수행한다.
  단순히 변수가 변화한 경우에는 리렌더링이 수행되지 않는다.

렌더링과 불변성

• useState의 내부 값이 기본형인 경우, 해당 값이 변경되었을 때 리렌더링을 수행하지만,
  useState의 내부 값이 참조형인 경우, 해당 값이 변경되어도 리렌더링을 수행하지 않는다.

  • 이유
    : 참조형은 불변성을 유지하지 못하기 때문에 값이 변경되면 원본 값도 같이 변경된다.
    따라서, 결과적으로 state가 변경되지 않았기 때문에 리렌더링을 수행하지 않는다.

• useState의 내부 값이 참조형인 경우에 state를 변경시키는 방법
  : 전개 연산자(...)를 사용하여 값을 복사한 뒤, 해당 값을 변경하고 결과를 useState에 반영

function App() {
  const [name, setName] = useState(["John", "Mary"])
  
  const onClickHandler = () => {
    setName([...name, "Sam"]);
  }
  
  return (
    <div>
      <button onClick={onClickHandler}>{name}</button>
    </div>
  )
}