2024. 01.31 FanLetter 만들면서 알게 된 것들 정리하기

1. useState 사용 시 주의할 점

export default function HwaSa() {
  const [letter, setLetter] = useState("");

  const onAddLetter = (letter) => {
    setLetter([...LetterList, letter])
  };
  return (
    <LetterForm
      onAddLetter={onAddLetter}
      imgUrl="img/hwa.png"
      text="화사에게 전달하고 싶은 메세지를 작성해 주세요❤️"
      personname="hwasa"
    />
  );
}

 

다음과 같은 코드를 작성할 때,

 

  const onAddLetter = (letter) => {
    setLetter([...LetterList, letter])
  };

이렇게 작성하는 것은 문제가 발생될 수 있다.

📖[...LetterList, letter] 의 순서는 무엇을 먼저 나열할 것 인지를 말해준다

 

❓ useState는 변경된 상태를 리렌더링하는 과정에서 어떤 부분이 바뀌었는지 얕은 비교를 하게 된다.
      만약 얕은비교가 끝나기 전에 다른 또 상태를 업데이트 하게 되면,
      그 상태는 읽히지 않을 수 있는 문제점이 있다. 

💡그래서 useState의 목록을 가지고 올때 이전 값을 받아 올 수 있도록 콜백 함수를 전달해 주는 것이 좋다.
     다음과 같이 setLetters() 안에 (콜백함수) => {콜백함수, 업데이트되는 상태 값}  으로 전달해 주자.

 

변경된 값

  const onAddLetter = (letter) => {
    setLetters((prevLetters)=>{[letter, ...prevLetters]})
  };

 

---

 

2. <Form>를 사용하면 좋은 이유! 

  return (
    <form onSubmit={handleSubmit}> 
      <img src={imgUrl} />
      <input
        type="text"
        placeholder={text}
        name="letter"
        personname={personname}
      />
      <button>제출</button>
    </form>
  );
}

이전에 form을 받을 때에 <button>에다 onSubmit을 넣어 사용해 줬는데 그럴필요가 없어졌다.

사용자에게 값을 입력 받을 코드와, 버튼을 <form>으로 한번에 묶고 <form>에 onSubmit을 전달하면 훨씬 편하다!

 

❓ <button> 에다 onSubmit을 넣어 사용하면, 버튼을 눌러야만 입력받은 값을 받을 수 있다.

💡 <button> 에 onSubmit을 전달하는 것이 아니라 <form>에 onSubmit을 전달하면,
     엔터를 누르거나 <button>을 누르면 입력 받은 값을 받아올 수  있다.  

 

---

 

3. 이벤트 값 간단하게 받아오기 (event값 변수로 받아서 사용하면 좋은 점)

export default function LetterForm({ onAddLetter, personname }) {
  const handleSubmit = (e) => {
    e.preventDefault();

    const letter = e.target.letter.value;
    const nickname = e.target.nickname.value;
    const date = new Date();

    if (!letter || !nickname) {
      alert("편지와 닉네임을 모두 작성해 주세요😁 ");
      return;
    }

    onAddLetter({
      id: uuidv4(),
      letter,
      nickname,
      date,
      personname,
    });

    e.target.reset(); 
  };

 

내가 기존에 알고있던 방법은 Input을 사용할 때에 vaule, onChange를 꼭 넣어줘야했었다.

 

    const letter = e.target.letter.value;
    const nickname = e.target.nickname.value;

위 코드처럼(2번코드 확인) input에 name을 주고 타겟을 설정해서 사용할 수 있다.

그런데 굳이 value 와 onChange를 사용하지 않아도 값을 받아올 수 있는 방법이 있다. 

 

❓ onChange를 사용해 e.target.value를 사용하면 event안에 target을 찾고 또 그 안에서 value를 찾아야 한다.

💡 변수로 선언해 사용하면  event가 발생할 때마다 값을 찾는 시간을 줄일 수 있다. (성능👍)

 

 

    if (!letter || !nickname) {
      alert("편지와 닉네임을 모두 작성해 주세요😁 ");
      return;
    }
    e.target.return()
 }

 

💲사용자에게 입력받은 값이 없을때 submit 되지 않기 위해 원래는 useState를 사용해 확인이 필요했는데,
     값을 변수로 사용해 바로 확인이 가능함으로 위처럼 논리합 연산자 || 를 통해서 바로 확인할 수 있다.

💲사용자에게 값을 입력 받고 초기화를 할때에도 useState를 이용해 초기화를 했었는데,
    e.target.return() 을 이용해 초기화를 할 수 있다.

 

---