231223 TIL

Section 6. State, Event Object

1. 공유 handler 함수

• 여러 Input의 changeHandler 함수 생성 방법

import { useState } from "react";

export default function App() {
  const [values, setValues] = useState({ userName: "", id: "", age: "" });
  const handleChange = (e) => {
    const { value, name } = e.target;
    setValues({ ...values, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(values);
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input type="text" name="userName" onChange={handleChange} />
        <input type="text" name="id" onChange={handleChange} />
        <input type="text" name="age" onChange={handleChange} />
        <button>Submit</button>
      </form>
    </div>
  );
}

import { useState } from "react";

export default function App() {
  const [values, setValues] = useState({ userName: "", id: "", age: "" });
  const handleChange = (value, name) => {
    setValues((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(values);
  };

  return (
    <div className="App">
      <input type="text" onChange={(e) => handleChange(e.target.value, "userName")} />
      <input type="text" onChange={(e) => handleChange(e.target.value, "id")} />
      <input type="text" onChange={(e) => handleChange(e.target.value, "age")} />
      <button type="submit" onClick={handleSubmit}>
        Submit
      </button>
    </div>
  );
}

2. 자식-부모 컴포넌트 통신

• 부모에서 자식에게 state를 props로 전달.
• 부모 → 자식

// Parent Component
...
const saveDataHandler = (enteredData) => {
  const data = {
    ...enteredData,
    sequence: Math.random().toString()
  };
  console.log(data);
}

3. 파생/계산된 State

• 만약 selectValue라는 state가 바뀔 때 마다 description이 바뀌는 경우라면?
• description을 state로 관리하기보다는 일반 값으로 변경하고 할당(=) 해주자.
  • selectValue state가 변경 → 리렌더링 → description도 변경됨.
• 이와 같은 방법이 권장된다.

4. Component

• Stateful Component
  • 내부 state가 존재
• Stateless Component
  • 내부 state는 없음. (props는 존재할 수 있음)

5. Event Handler

• 리액트에서 수동으로 이벤트 리스너(addEventListener)을 추가할 경우, 이는 명령형 코드이기에 React 컴포넌트 외부의 일부 함수를 트리거하므로, 컴포넌트의 state와 상호작용 X
  
• <중요> 리액트는 선언형 코드이다!