[💻 코드스테이츠 FE 44기] state-props 과제

✔️ 시작

이전 학습시간에 배웠던 state, props, event를 활용해 푸는 과제를 진행했다.

📍 Tweets-state-props

다른 부분은 생각 보다 쉬워서 금방 진행 되었는데
Tweets.js에서 새로운 트윗 입력 후 버튼 클릭시 최상단으로 업로드 하는 영역이 어려웠다.

useState부분 이해가 잘 되지 않아 유튜브 영상을 많이 봤던 거 같다.

const [현재 useState에 들어간 state 변수, 현재 state를 갱신해 주는 함수] = useState(useState 초기 값);
const [tweets, setTweets] = useState(dummyTweets);

• tweets에는 dummyTweets 데이터가 들어간다.

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]);
  };

• setTweets 함수를 이용해 tweet를 수정할 수 있다.

const[state 저장 변수, state 갱신 함수] useState(초기 값)

• useState 사용해 새로운 state를 선언할 때는 [ , ]으로 감싸줘야한다. (배열 형식)
• useState에 배열, 객체를 사용할 땐 깊은 복사(spread syntax 등) 해서 사용한다.
• useState는 string, number, array, object 등 전부 저장가능하다.
• 변수 대신 쓰는 데이터 저장 공간이다.
• 자주 변경되고 중요한 데이터는 변수 대신 state로 저장한다.

onChange

• input, textarea 등의 입력 폼에는 onChange 속성을 넣어줘야 작성 내용이 보인다.

map()

• map()메서드를 사용할 경우 key={}속성을 넣어줘야한다.

✏️ 마치며

이번 과제는 다른 부분은 이미 배웠던 영역으로 복습하는 개념으로 가볍게 풀 수 있었지만 신규 글을 상단에 배치하는 문제에서 생각 보다 오래 걸렸다.

알고 보니 다른 페이지에서 중복 선언된 문제로 같이 진행하던 페어분 께서 찾아 주셨다.

에러가 나고 내가 작성한 코드에 문제점이 없을 경우
다른 연결되어 있는 페이지를 유심히 살펴볼 필요가 있을 것 같다.