[React] 내배캠 팬레터 프로젝트(1) : useState 잘 설정하기..

 

 

💡 특정멤버에게 편지를 작성하고, 멤버 페이지마다 그 멤버의 편지함을 볼 수 있는 사이트

 

😇  state 변경이 헷갈려 한참을 헤맨..

function Form({ memberId, letters, setLetters }) {
  const [nickName, setNickName] = useState("");
  const [content, setContent] = useState("");
  const [member, setMember] = useState(memberId);

  useEffect(() => {
    setMember(memberId);
  }, [memberId]); // memberId 가 바뀌면 set

  const addLetter = (e) => {
    e.preventDefault();

    if (!nickName) {
      alert("닉네임을 입력해 주세요.");
    } else if (!content) {
      alert("내용을 입력해 주세요.");
    } else {
      const newLetter = {
        id: uuid(),
        nickName,
        createdAt: new Date().toLocaleDateString("ko", {
		  // ...
        }),
        content,
        writedTo: member,
      };

      setLetters([...letters, newLetter]);
      setNickName("");
      setContent("");
    }
  };

  return (
    <StForm onSubmit={addLetter}>
      // ...
      <StSelectSection>
        <StLabel>To </StLabel>
        <select onChange={(e) => setMember(e.target.value)}> // 옵션 바뀌면 set
          <option value="mads">Mads</option>
          <option value="jonathan"> Jonathan</option>
        </select>
      </StSelectSection>
      <StBtn type="submit">click</StBtn>
    </StForm>
  );
}

 

useEffect 가 없던 상황

버튼을 클릭하면 props 로 memberId 를 받아서 누구에게 쓸 지가 정해지는데

Form 안에 옵션을 두어서 setMember 를 만들게 됐다.

그래서 추가 시 writedTo 에 바뀐 member 가 들어가도록 했는데..!

 

이렇게 하니.. 옵션이 아니라 위 버튼으로 멤버 페이지를 바꿨을 때

처음 클릭했던 버튼의 멤버로만 편지가 보내지고 있었다.

 

받아오는 memberId 가 바뀌어서 member 의 값이 바뀌지만

set 이 되지 않기 때문이었다.

 

그래서 ~~

위 버튼을 클릭하면 setMember 가 되도록 해야할 거 같은데

둘이 분리되어 있는.. 컴포넌트라 props 를 이어줄 수가 없어서

한참을 어째야하나 하고 있었다.

 

🥲 그러다 useEffect 가 생각나서 memberId 가 바뀌면 set 되도록 설정했다!

 

옵션 기능을 넣다가 생긴 문제.. ~

한 기능을 추가하면 또 다른게 안되고 하는거 같다 🥲🥲🥲🥲

상태들을 잘 이해하고 만들어야겠다