TIL: 2022-10-04

⚙️ 오늘 배운 주제

React State & Props / 과제 recap

 

🐹 오늘의 기분

저번 주 회고는 쓰지 않았다. 주차를 거듭할수록 같은 내용이 반복되는 느낌이라 글을 쓰면서도 기계적으로 작성하고 있다는 생각이 지워지지 않았다. 이럴 거면 차라리 모아뒀다 섹션 회고 때 쓰는 게 낫지 않나 하는 생각이다. 부트캠프에서의 일주일은 정말 빠르게 지나가고 학습 내용이 다이나믹하게 변화하는 것은 맞다. 하지만 매일 9시부터 6시까지 공부하는 루틴은 변하지 않고 있기 때문에 주간회고에 쓰는 내용에는 큰 변화가 없다. (대부분 복습 잘하고, 건강관리 잘 하고.. 이런 내용들?) 그래서 주간 회고는 필요성을 느낄 때쯤 다시 시작해보려 한다. 아마 프로젝트에 들어간다면 훨씬 느끼는 게 많아질 테니 그 땐 다시 주마다 쓰게 될 수도...? 

과제로 나왔던 트위터 클론 과제의 CSS를 수정해보려 했는데 혹시나 다 망가질까 싶어 섣불리 손을 댈 수 없었다. 현업에 가면 아예 새로운 코드를 짜는 것보다는 기존 코드를 유지보수하는 일이 더 많다고 하는데, 이 점을 생각해 어떻게 되든 조금씩 수정해나가는 연습을 해봐야겠다. 애초에 내가 너무 큰 그림을 생각해서 그런 것 같기도 하고? 작은 것부터 해보자.

 

🗣 과제 되돌아보기

이번 과제의 가장 포인트라고 생각했던 부분이다. 

트윗 전송 버튼을 누르면 트윗이 추가되도록 하기!

 

const [tweets, addTweet] = useState(dummyTweets);

 

처음에는 tweets.unshift(tweet)으로 트윗을 추가하려 했었다.

이렇게 하니 버튼이 한 번밖에 안 눌려서 뭔가 문제가 있는 것 같아 페어분과 계속 고민했다.

도저히 방법이 안 떠올라서 구글링 하다가 아래 글을 보게 되었다.

The Complete Guide to Building React Forms with useState Hook

 

tweets를 직접적으로 변경하려 했던 것이 문제였다.

여기서는 spread 연산자로 tweets를 업데이트해주고 있었다.

const Tweets = () => {
  // ...
  // 상태 변수, 상태 변경 함수, useState(상태 변수 초기값)
  const [tweets, addTweet] = useState(dummyTweets);
  
  const handleButtonClick = () => {
    // ...
    
    // 새 트윗을 맨 앞에 넣은 새 배열을 tweets에 할당
    addTweet([tweet, ...tweets]);
  }
  
  // ...
}

useState에 정의한 addTweet 함수의 전달인자가 tweets를 업데이트해준다. 

새 트윗을 넣고 싶다면 tweet을 맨 앞에 넣은 후 spread 연산자로 기존 tweets 배열을 펼쳐 그 뒤에 넣으면 된다.

이걸 발견하지 못했다면 계속 unshift만 생각했을 것 같다. 

 

그리고 return문에서 자바스크립트 문법을 쓸 때 중괄호 쓰는 걸 자꾸 빼먹었다.

갈 길이 멀다!