[💻 코드스테이츠 FE 44기] ✨반딧불이반✨ React Twittler state-props 의사코드작성

✔️ 시작

종합 퀴즈에서 무려 4개나 틀려서 반딧불인반에 선정 되었다...ㅠ

열심히 풀었다 생각했는데 역시나 다중 문제나 수정한 문제를 틀렸다.

📍React Twittler state-props

오늘 학습한 내용

• JSX 문법의 규칙을 이해한다.
• 컴포넌트의 개념을 이해한다.
• Creact-React-App을 이용해 리액트 개발환경을 구축할수 있다.
• React를 통해 페이지가 렌더링 되는 과정을 이해한다.

  // TODO : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.
// useState에 dummyTweets으로 초기 값 넣어주기

const [username, setUserName] = useState('');
const [msg, setMsg] = useState('');
const [tweets, setTweets] = useState(dummyTweets);

// picture 출력이 안되는 문제로 이전 파일에서 가져오기
const getRandomNumber = (min, max) => {
    return parseInt(Math.random() * (Number(max) - Number(min) + 2));
  };

const handleButtonClick = (event) => {
// tweet에 신규 객체 생성하기 username, content에 username, msg 추가하기
   const tweet = {
     id: tweets.length + 1,
     username: username,
     picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(
        1,
        98
      )}.jpg`,
     content: msg,
     createdAt: new Date(),
     updatedAt: new Date(),
   }
   // TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요.
    // 트윗 전송이 가능하게 작성해야 합니다.

   // setTweets 함수에 생성한 tweet 상단에 배치하기
   // dummyTweets값이 담겨있는 tweets 뒤에 spread syntax로 추가해 주기
   // (배열, 객체는 깊은 복사를 해서 가져와야한다. (push, unshift))
    return setTweets([tweet, ...tweets]);
  };

.
.
.
// button 태그 onClick={해당 함수} 함수 추가해 주기
// 클릭 시 작성 되도록 수정
<button className='tweetForm__submitButton' onClick={handleButtonClick}>전송</button>

잘 모르는 부분

• useState의 쓰임새를 정확히 알기 어려웠다.
• onClick={함수 호출}중 {} 중괄호에 들어가는 부분을 어떻게 작성해야하는지 헷갈렸다.

어려웠던 부분

• useState()의 쓰임새를 어떻게 사용하는지 힘들었다.
• 분명 잘 작성한 코드인데 테스트 통과가 안되서 한참 찾았던 거 같다. 다른 페이지에 중복 선언되어서 그랬었다. (페어분의 도움으로 오류를 바로 찾을 수 있었다.)

느낀점

• 이번 학습에서는 부족한 점이 많아서 유튜브를 많이 참고하게 된거 같다.
  마지막 setTweets([tweet, ...tweets]); 이부분도 왜 이렇게 작성해야하는지도 알게 되었다.
  배열, 객체의 경우 useState 사용시 깊은 복사 후 사용해야한다고 한다.

초반에 unshift 사용해서 이게 왜 안 되는지 의문을 가졌던 거 같다.

✏️ 마치며

이번 반딧불이 과제 블로깅하면서 내가 놓쳤던 부분을 발견하기도 하고
되돌아보는 시간이 되었던 것 같다.