[ 스파르타 / TIL ] 내일배움캠프 #29

오늘 한 것

---

• 알고리즘 문제 풀기
• 리액트 강의 보기

 

 

노트 정리

---

[ 프로그래머스 / Javascript ] 문자열 내 p와 y의 개수

 

 

useState 쓰는 방법

---

각각의 함수는 onChange가 일어나면 실행이 된다. 하지만 이 3개는 항상 한 번에 다 실행이 되기 때문에 한 번에 묶어줄 수도 있다. 

const ExpenseForm = () => {
  const [enteredTitle, setEnteredTitle] = useState('');
  const [enteredAmount, setEnteredAmount] = useState('');
  const [enteredDate, setEnteredDate] = useState('');

  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
  };

  const amountChangeHandler = (event) => {
    setEnteredAmount(event.target.value);
  };

  const dateChangeHandler = (event) => {
    setEnteredDate(event.target.value);
  };
  return ();
  };

 

useState 3가지를 하나로 묶는 방법.

 

방법 1을 쓸 경우 동시에 많은 상태 업데이트를 계획한다면 오래되었거나 잘못된 state에 의존할 수도 있다. 

방법 2를 사용한다면, 상태 스냅샷이 가장 최신 상태의 스냅샷을 사용해 업데이트를 엽두에 두고 있게 된다. 

그래서 만약 상태 업데이트가 이전 상태에 의존하고 있다면 방법 2번을 사용하는게 좋다. 

 

const ExpenseForm = () => {
  // const [enteredTitle, setEnteredTitle] = useState('');
  // const [enteredAmount, setEnteredAmount] = useState('');
  // const [enteredDate, setEnteredDate] = useState('');

  const [userInput, setUserInput] = useState({
    enteredTitle: "",
    enteredAmount: "",
    enteredDate: "",
  })

  const titleChangeHandler = (event) => {
    // 방법 1
    setUserInput({
      ...userInput,
      enteredTitle: event.target.value,
    });
    
    // 방법 2
     setUserInput((prevState) => {
      return {...prevState, enteredTitle: event.target.value};
    });
  };

  const amountChangeHandler = (event) => {
    setUserInput({
      ...userInput,
      enteredAmount: event.target.value,
    });
  };

  const dateChangeHandler = (event) => {
    setUserInput({
      ...userInput,
      enteredDate: event.target.value,
    });
  };
  return ();
  };