● 3월 27일 Section 2 / Unit6 - [React] React State & Props

● 오늘 공부한 것

• 반딧불반 숙제(의사코드 작성)

App.js

*ToDo : React Router Dom 설치 후, BrowserRouter, Routes, Route 컴포넌트를 적절히 사용합니다.

1. 먼저 index.js 에서 <BrousterRouter>를 import 해온 뒤,  <App>컴포넌트를 감싸준다.
2. App.js에서 <Routes>태그를 열어주고, 컴포넌트 3개(Tweets, About, Mypage)를 불러온뒤, <Route> 컴포넌트를 3개 만들어준다.
3. <Route path="/" element={<Tweets>}> <Route path="/about" element={<About>}.. path에 맞게 3개의 Route를 열어 컴포넌트를 연결해준다.
4. Route를 열었으면 Link 컴포넌트를 써야하니까, Link 컴포넌트를 열어줄 js파일로 이동한다.

Sidebar.js

*ToDo : Link 컴포넌트를 작성하고, to 속성을 이용하여 경로(path)를 연결합니다.

1. 먼저 react-router-dom에서 Link컴포넌트를 import 해온다.
2. <Link> 태그를열어 아까 위의 Tweets, About, Mypage와 연결해온다.
3. <Link to="/"></Link> 태그 중간에는 각각에 맞는 fontawsome을 넣어준다.

Footer.js

*ToDo : Footer 함수 컴포넌트를 작성합니다.

1. <footer></footer> 태그로 감싸준다.

Tweets.js

*ToDo : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.

1. useState를 써야하니, import 해온다.
2. dummy데이터를 담을 state를 만든다. ( const [tweets, setTweets] = useState(..dummyTweets.reverse()) )
3. 만약 새글을 작성했을 때, 더미데이터가 최신 순으로 보여야하니 reverse 배열 메서드를 써서 뒤집어 주었다.

*ToDo : Tweet input 엘리먼트 입력시 작동하는 함수를 완성하세요.

1. 인풋 태그에 username를 state로 만들어준다. 그리고 username은 'parkhacker'로 값을 설정해준다.
2. handleChangeUser 라는 이벤트 핸들러에, user 이름을 입력할 때마다 변경되도록한다. setUsername(e.target.value)로 설정한다.
3. user이름을 입력하는 이벤트에 onChange 이벤트에 이벤트핸들러 handleChangeUser을 달아준다.

*ToDo : Tweet textarea 엘리먼트 입력시 작동하는 함수를 완성하세요.

1. 인풋 태그에 message를 state로 만들어준다. 그리고 message는 ''로 값을 설정해준다.
2. handleChangeMsg 라는 이벤트 핸들러에, 메시지를 입력할 때마다 변경되도록한다. setMessage(e.target.value)로 설정한다.
3. message를 입력하는 textarea에 onChange 이벤트에 이벤트핸들러 handleChangeMsg를 달아준다.

*ToDo : Tweet button 클릭시 작동하는 함수를 완성하세요.

1. 먼저 객체를 만들어준다. 객체안에는 id, username, picture, content, createdAt, updatedAt 프로퍼티를 가지고 있다.
2. username은 아까 만들어준 state이고, message도 아까 만들어준 state이다. id는 아까 dummy데이터를 가져와 state로 만든 tweet의 길이로 만들어주었다.
3. 그리고 spread 문법으로 새로운 배열을 만들어준다. const newTweets = [위에 새로만든 객체, •••tweets]로 만들어준다.
4. setTweets(newTweets)로 state를 다시 설정해준다.
5. 위의 식들로 만든 이벤트 핸들러를 원하는 버튼에 핸들러로 달아준다.

*ToDo : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다.

1. 아까 state로 만든 tweets 로 map 고차함수를 써서 리스트를 보여준다.
2. return 으로는 <Tweet> 컴포넌트를 <li>태그로 감싸 리턴한다.
3. Tweet의 props로는 item 즉, 객체 하나하나로 넣어줄 것이다.

Tweet.js

*ToDo : 유저이름이 있어야합니다.

1. props로 넣어준 객체를 디스트럭처링 문법으로 {tweet}으로 받아온다.
2. {tweet.username} 으로 넣어줄 곳에 넣어주면 된다.

*ToDo : parsedDate를 이용해 트윗 생성 날짜가 있어야합니다.

1. parsedDate를 넣어주면 끗..!

Mypage.js

*ToDo : 주어진 트윗 목록(dummyTweets)중 현재 유져인 parkhacker의 트윗만 보여줘야 합니다.

1. 받아온 더미데이터 중에서 filter 고차함수로 걸러내주어 다른 값으로 할당해주었다.
2. map으로 돌아 각 객체마다 <Tweet> 컴포넌트를 만들어 준다.
3. 그리고 props으로 각 객체를 넣어준다.

 

• 리액트 컴포넌트의 라이프사이클 메서드

[7장 컴포넌트의 라이프사이클 메서드]

• Hooks

● 내가 놓치고 있던 것

서버에 계속 요청하면서 데이터를 가져오기에는 비용이 많이 들기 때문에 점점 프론트 쪽에서 데이터를 가져와서 그 데이터 자료를 관리하는 요구가 증가하기 시작했다. 서버에서 불러오지 않고 한번 가져오면, 그 값들을 조정해서 프론트쪽에서 상태를 관리하게 된 것이다.

전역상태 : 페이지 전체에 영향을 줄 수 있는 상태 

지역상태 : 컴포넌트 내에서 관리할 수 있는 (작은) 상태

 

---

 

● 끝맺음

• 수업이외의 학습
  • 알고리즘 문제 3개
  • 내일 스터디 준비, 모던자바스크립트 재복습
  • Hooks 정리..