TIL 23.01.27

오늘은 어제 진행한 과제에, select 태그를 사용했을 때 나타난,

오류를 수정하였고 추가적으로 delete와 update기능을 추가하였다.

 

 

사용자리스트를 받아, 목록으로 볼 수 있도록 <select>를 이용하여 

사용자의 이름 목록을 만들었다.

 

그 과정에서, 현재 사용자가 맞다면 selceted를 주어, 기본적으로 선택되게 만들고 싶었다.

하지만 아래와 같은 경고 문구가 떴다.

 

 

관련 문제에 대해서 검색을 통해 찾아보니,

react에서는 selceted보다 vlaue 또는 defaultValue를 통하여 초기 값을 세팅해 줘야한다는 것을 알게 되었다.

 

 

 

관련 내용을 적용해서, 다시 코드를 작성하였고, 오류가 사라진 것을 볼 수 있었다.

 

추가적으로 진행한 delete기능은

선택된 tweet의 정보를 받아서, filter를 통하여

그 tweet를 제외한 새로운 tweet 목록을  갱신해주면서  localStorage도 갱신시켜주었다.  

 

비교적 간단하게 구현한 delete 기능에 비해서

update 기능을 생각보다 복잡하였다.

우선, mode라는 state를 만들어서, read상태와 update 상태에 맞게 화면을 구성하였다.

 

mode가 'Read'일 때는, 글을 불러오고,  'Update'일 때는 글을 수정할 수 있게 input태그와 textarea 태그를 불러왔다.

그 후 글을 수정하고 저장하면,  새로운 tweet 목록을 만들어 수정된 내용을 갱신해주고,

새로운 tweet 목록을  갱신해주면서  localStorage도 갱신시켜주었다.

마지막으로 다시 Read모드로 돌아가게 갱신해주었다.

 

 

아래 영상처럼 구현한 기능이 모두, 문제없이 작동하는것을 볼 수 있었다.