S1: 트위터 목록과 삭제

트위터 사용자 이름과 트윗 내용을 쓰면 입력한 값을 state에 저장시켜야한다.

각 입력창마다 onchage를 사용하여 입력될때마다 지속적으로 부모 컴포넌트에서 useState로 각 입력값들을 저장하여 상태를 관리하게 하여야한다.

onChange 함수로 입력값에 변화가 일어날 때 마다 함수를 작동시켜 state에 값을 저장하도록한다.

 

Tweet 버튼을 통해 트윗이 업데이트 되면 onClick 이벤트로 새트윗을 작성받아 해당 값 뒤로 기존 tweets들을 전개연산자로 추가하여 만들어진 새 값을 현재 값에다가 상태를 관리하도록 작성한다.

 

 

트윗위에 현재 등록된 트윗들을 작성자 별로 관리하는 select 탭을 만들기 위해 데이터가 저장된 tweets들의 중복을 제거하여 하나의 배열을 다시 만든다.

새로 만든 uniqueOption 배열안에 이름만으로 정렬한 배열 값이 존재안할경우에만 배열안 값들을 차례대로 push한다.

이 과정을 통해 작성자 이름만으로 중복이 없는 배열이 만들어졌다.

 

새로 만들어진 함수를 map하여 select의 option들로 나열 시킨다. 선택된 값의 value에 따라 아래에서 삼항연산자를 통해 화면에 뿌려줄 Tweet을 선택하게 된다.

 

작성된 트윗을 삭제하기 위해 삭제버튼이 눌러진다면 해당 트윗의 내용이 저장된 tweets가 수정되어야하고 이는 부모컴포넌트인 Tweets에서 상태를 관리중이므로 부모컴포넌트의 tweets를 수정하는 함수인 setTweet를 삭제 버튼이 달린 자식의 컴포넌트로 props를 전달해준다. 상단 그림처럼 test={setTweet}로 넘겨준다.

 

각 트윗마다 삭제버튼을 생성시키고 버튼을 누를시 함수가 작동되어 test 즉 setTweet에 삭제되고 남은 tweet들의 값 목록을 주어 상태를 수정한다.