[Day 29] 2022-0802 : props, state 활용해 SPA 만들기

오늘 배운 것

• 리액트의 Props와 State 개념에 대해서 정리해보았다. 

[React] 리액트 Props 와 State 를 알아보자!

새롭게 알게된 것

Props와 State 활용

• 오늘은 어제까지 진행했던 twitter 클론 과제에 이어서, 사용자가 입력한 데이터를 화면에 렌더링할 수 있도록 props와 state 개념을 활용하여 연습했다. 과제가 진행될수록 컴포넌트간 분리가 더욱 확실해졌는데, 오늘 과제에서는 컴포넌트와 컴포넌트를 포함하는 페이지들 그리고 전체 페이지 경로를 가지고 있는 App.js 파일과 이를 화면에 렌더링하는 index.js 파일로 크게 구분할 수 있었다.
• 클릭시 경로를 이동하는 컴포넌트 안에서 Link 컴포넌트를 활용했고, 그 바깥쪽 상위 컴포넌트에서 Routes와 Route를 설정하여 이동될 수 있도록했다. 
• 페이지 컴포넌트 Tweets와 각 메시지 컴포넌트인 Tweet 이 있을 때, 먼저 Tweets 에서 map 메서드로 각 데이터를 전달하여 Tweet 컴포넌트를 생성했다.
• 화면에 업데이트된 전체 트윗 목록이 뜰 수 있게 전체 데이터를 state로 등록해야하는 것을 바로 깨닫지 못했다. 이 부분도 변경되는 데이터이기 때문에 state로 등록을 해서 변경을 감지해야한다. 이후에는 입력 버튼을 누르면, 사용자의 입력데이터로 새로운 tweet 객체를 생성하고, 이 객체를 포함한 전체 트윗 목록들을 setState 함수에 전달해, 데이터 갱신 및 리렌더링이 되도록 코드를 작성했다. 

// 컴포넌트의 코드 일부분...
const [tweets, setTweets] = useState(dummyTweets);

// 입력 버튼을 누르면 실행되는 핸들러
const handleButtonClick = event => {
	// 사용자의 입력 데이터로 새로운 객체를 생성한다.
    const tweet = {
      id: tweets.length + 1,
      username: username,
      picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(1, 98)}.jpg`,
      content: msg,
      createdAt: new Date().toLocaleDateString('ko-kr'),
      updatedAt: new Date().toLocaleDateString('ko-kr'),
    };
    // 이 객체와 기존 객체를 합쳐서 setTweets 함수에 전달하면 데이터 갱신 + 리렌더링이 된다.
    setTweets([tweet, ...tweets]);
};

• 생성한 Tweet 컴포넌트의 key 값이 id 값이어야 했는데, 처음에는 이것도 어떻게 접근해야할지 몰라서 고민했는데 페어분이 이렇게 하도록 제안해주셨다. 
• 마지막에 헤맸던 부분이, 데이터에 map 메서드로 개별 데이터 전달해서 컴포넌트 생성하는 부분이었는데, 여기서 데이터 변수명을 잘못 입력해서 맞왜틀...?을 1시간정도 시전했다. 처음에는 props로 받아온 데이터에 업데이트를 하기 때문에 안되는건가? 라고 생각했는데, unshift를 사용하지 않고 새 배열을 생성하고 있기 때문에 문제가 없었다. 뭔가 컴포넌트를 따로 분리해야 되는건가 했는데, 변수명을 잘못 쓴 것이어서 엄청 허무하면서도 해결해서 기분은 좋았다. 

SUMMARY

잘한 점

• 맞왜틀이었지만 차분하게 문제를 찾으려고 노력했음. 

보완할 점

• 오늘 하기로 했던 공부를 절반 밖에 못한 것. 따로 리액트 공부를 더 하기로 했는데 오늘 배운 내용을 복습하는 것에서 그쳤다. 아쉽,, 
• 내일은 스터디를 위해서 타입스크립트를 공부해야한다. 사실 더 미리 공부했어야 하는데 뭐하다가 시간이 이렇게 흘렀는지.,,,,, 책도 안읽고 시간을 더 압축적으로 써야한다. 

느낀 점

• 요즘 블로그를 쓸 때 최대한 이해하기 쉬운 언어로 풀어서 쓰는 연습을 한다. 비유도 만들고 시각 자료도 만들어서 정리하는데 시간은 오래걸리지만 그만큼 적당히 아는 개념은 조금 더 알 수 있게 공부가 된다. 
• 다만 정확한 정보 전달을 위해서 조금 더 노력해야겠다.