React - Redux (fan page)-2

FanPage만들기[2]

Styled-component로 모든 시멘틱태그를 만든다.

export const Section = styled.section`
  display: flex;
  margin-bottom: 1rem;
`;
export const Label = styled.label`
  width: 5rem;
  display: flex;
  align-items: center;
`;
<Section>
   <Label>수신인 : </Label>
</Section>

처음때는 Input태그에 value={value}와 onChange로 해결을 했다면, 이제는 렌더링을 최소화 하여야 하기 때문에 Form태그를 이용해서 e.target을이용해 새로운 메세지가 생길때마다 객체를 생성하는 방식을 사용한다.

// SendPage.jsx
newMessage({
      id: crypto.randomUUID(),
      nickname,
      context,
      selectBox,
    });
 e.target.reset(); //input태그가 실행되고 나서 빈값으로 돌아오게 만듦

- props 방식

 Home.jsx
<Content>
      <MemberList/>
      <SendPage newMessage={newMessage} />
      <SendList />
</Content>

SendPage에서 데이터를 생성할때마다 Home.jsx에 props로 newMessage를 올려서 useState로 list화를 시킨뒤에 자식컴포넌트들로 뿌려준다.

  const newMessage = (todo) => {
    // 업데이트된 letterList를 사용하여 localStorage에 저장
    const updatedList = [todo, ...letterList];
    setLetterList(updatedList);
    localStorage.setItem("letterList", JSON.stringify(updatedList));
  };

• const updatedList = [todo, ...letterList]; => todo라는 가장최근의 배열을 앞에 저장하고 스프레드 연산자(...)로 본래 배열을 뒤에 붙혀준다.

• localStorage.setItem() ===> key와 value를 추가하는 의미
  localStorage.setItem("letterList", JSON.stringify(updatedList));

• 키값 letterList를 가지면서 value는 updatedList라는 객체 데이터를 가지고 JSON.stringify라는 객체를 json으로 변형해주는 것으로 변형해준다.

  useEffect(() => {
    const list = JSON.parse(localStorage.getItem("letterList"));
    if (list) {
      setLetterList(list);
    }
  }, []);

• 처음 페이지가 리로드될때 랜더링을 한다
• letterList라는 아이템을 getItem으로 읽어오고 json을 객체로 변형을해준다.