20일차
2021. 08. 13 금요일
1. Today's Key points!
- State, Props
- react-router-dom
- { BrowerRouter, Switch, Route, Link }
- React Twittler
2. 정리해보자!
- State란? 변할 수 있는 값. 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값. 즉, 변화가 필요한 데이터는 State로 관리한다. State가 변경되면 컴포넌트가 리렌더링 된다.
- Props란? 외부로부터 전달받은 값. 자료형 타입은 객체.
- UseState란? state를 함수 컴포넌트 안에서 사용할 수 있게 해준다. 새로운 state를 선언할 때 [state, setState]라고 선언해야 한다. 전달인자는 하나만 전달할 수 있다. 변환하는 두 번째 요소는 첫 번째 요소인 state를 갱신할 수 있는 함수이다.
const [state저장변수, 갱신함수] = useState(초기값) - props전달 방법 : 컴포넌트 속성은 props attribute로 전달 한다. 태그와 태그 사이는 props.children으로 전달한다.
- onClick이나 onChange 같은 이벤트 속성에는 함수가 들어가야 한다. 함수를 하나 선언한뒤 onClick={함수이름}을 넣거나, onClick = { () => { 리턴해줄 값 } } 이렇게 함수 자체를 넣어야 한다.
3. 복기!
React twittler 과제를 통해 state, props를 활용한 twittler만들기를 해보았다. state와 props를 어떻게 활용했는지 복기해보고자 한다.
1단계 : 과제 레포지토리에서 자료를 클론한뒤, npm install react-router-dom 으로 리액트 라우터 돔을 설치해준다.
2단계 : 상세 컴포넌트 구현하기.
1) Footer 컴포넌트에 후손 엘리먼트로 시멘틱 엘리먼트 <footer> 넣기
2) Tweet 컴포넌트에 정보 넣기. 이미지, 유저 이름, 트윗 생성 일자, 메세지를 전달받은 props의 정보를 넣어야 한다.
3단계 : 페이지 컴포넌트 구현하기
1) About 컴포넌트에 자식 컴포넌트로 Footer 컴포넌트 넣기
2) MyPage 컴포넌트에 현재 유저인 parkhacker의 트윗만 보여야 한다. Footer 컴포넌트 넣기. MyPage 컴포넌트의 자식인 Tweet 컴포넌트에 props로 각 트윗의 정보(dummyTweets의 요소)가 전달되야 한다.
3) Tweets 컴포넌트는 하나의 트윗이 아니라, 주어진 트윗(dummyTweets)의 개수에 맞게 보여줘야 한다. Footer 컴포넌트 넣기.
4단계 : React Router 적용하기
1) React Router 컴포넌트 적용. Route path가 '/'인 Tweets, '/about'인 About, '/mypage'인 MyPage 컴포넌트
2) Tweets 아이콘의 Link 컴포넌트는 '/' , About 아이콘은 '/about' , Mypage 아이콘은 '/mypage' 로 연결
5단계 : State, Props 활용 트윗 전송 Form 만들기
1) 유저 이름을 작성할 수 있 는 input 엘리먼트 만들기
2) 트윗 작성할 수 있는 textarea 엘리먼트 만들기
3) 트윗 전송할 수 있는 button 엘리먼트 만들기
4) 유저 이름, 트윗을 작성하고 트윗 버튼을 누르면 새로운 트윗이 추가되야 한다. 기존의 트윗은 보여주면서 상단에 새로 추가된 트윗을 보여주어야 한다.
