[TS Pair Study - 4Week] my Agora States 리팩토링③

이번주도 my Agora States 리팩토링 시간을 가졌다! 

이번주는 많이 진행을 하지 못한거같다🥲 수업이 지쳐서 그런지 느슨해진 기분도 들고,,,다시 화이팅하자!

다음주부터 수업에서 타입스크립트를 배운다고 하니까 미리 공부해두길 잘했다는 생각이 든다,,

 

my Agora States 진행 상태

깃허브를 관리하는 과정에서 코드가 날아갔다... 다행히 코드는 복구를 했지만 스타일 컴포넌트 파일은 구하지 못했다는...급한대로 기본 틀만 잡아주었다!

---

➤ Event 객체에 type 지정, id 속성에 타입 변경

const [data, setData] = useState(dataList);

const onSubmitDiscussion = (e:React.FormEvent<HTMLFormElement>) =>{
        e.preventDefault()
        const newData : NewData = {
            id: String(Date.now()),
            createdAt: JSON.stringify(new Date()),
            title: title,
            url: "https://google.com",
            author: name,
            answer: null,
            bodyHTML: question,
            avatarUrl: './icon.png',
        }
        const updatedData = [newData, ...data];

        setData(updatedData);

        setName('');
        setTitle('');
        setQuestion('');
    }

처음에 id 값으로 name을 넣어주었다. 하지만 민선님이 같은 id가 있을 경우를 대비해 Date.now()를 사용한다 하셔서 적용을 했더니 타입 에러가 떴다. id의 타입은 string이었기 때문에 number가 들어갈 수 없었다. 

Date.now()를 String() 타입으로 지정해주었더니 에러 해결!

 

➤ ul, li 태그 헷길리지 않기🥲

function Discussion() {

     return (
        <>
            <DiscussionWrapper > 
                <DiscussionContainer>   //ul
                    {dataListMap.map((data: Discussions, index) => (
                        <AvatarAnswered key={index}>   //li
                            <Answered>
                                <p><ImgStyle src={data.avatarUrl} /></p>
                                <p>{data.answer? '✦' : '✧'}</p>
                            </Answered>
                            <p>{data.title}</p>
                            <p>{data.author}/{data.createdAt}</p>
                        </AvatarAnswered>
                    ))}
                </DiscussionContainer>
            </DiscussionWrapper>
        </>
    )
}

ul과 li를 헷갈리지 말자ㅜㅜ처음에 dataListMap.map()을 li태그 안에서 했더니 데이터가 나뉘지 않고 덩어리로 있어서 너무 당황스러웠다.. 지금껏 li요소안에서 놀고있었던것...! ul태그로 코드를 이동시켜주고 함수안에 li태그를 넣어주자!

 

---

이번주 스터디는 정말 리덕스의 필요성을 느꼈다,, 새로 만든 데이터를 더미데이터에 submit하기 위해선 상태끌어올리기를 해주어야하는데 두번의 과정이 필요하고 코드가 많이 복잡해질 것 같아서 리덕스를 사용해 보기로 했다...!두근.. 

조금 더 쉬운 상태관리를 위해 리덕스를 연습해보려 했지만 이렇게 하게 될줄이야. 그래도 열심히 해보는거로

다음 스터디시간까지 CRUD를 완성하기로 했다. 이제 My Agora States 마무리와 리드미 작성만이 남았다. 끝이 보이는거같아서 아쉽다

이번주도 수고했다 내자신!토닥토닥🥺 다시 열심히 해보자!

민선님도 너무 수고많으셨어용!! 휴일 잘 보내시구 다음주 타입스크립트도 화이팅해바용!!🫶