- App 컴포넌트 내부에 Sidebar 컴포넌트를 추가한다.
- span이나 i 태그에 className을 추가해 아이콘을 추가한다.
- Feature 컴포넌트 내부에 Counter 컴포넌트를 추가한다.
- Counter 컴포넌트 내부에 total 텍스트와 배열의 length를 구해 템플릿 리터럴로 작성한다.
- Features 컴포넌트 내부에 Footer 컴포넌트를 추가한다.
- Footer 컴포넌트에 리턴되는 요소들을 감싼 최상위요소 div를 footer 태그로 변경한다.
- img 태그를 추가하고 src에 tweet 객체에서 이미지 주소를 가져오는 값을 할당한다.
- span 태그를 추가하고 tweet 객체에서 유저 이름을 찾아 텍스트에 넣고 className으로 클래스를 지정한다.
- span 태그를 추가하고 tweet 객체에서 생성일자를 텍스트에 넣고 클래스를 추가한다.
- div 태그를 추가하고 tweet 객체에서 본문내용을 나타내는 키를 찾아 할당하고 클래스 이름을 준다.
- 만약 유저 이름이 parkhacker라면 특정한 클래스를 주도록 삼항연산자를 작성한다.
'study > React' 카테고리의 다른 글
[React] Fragment (0) | 2023.01.27 |
---|---|
[React] defalutValue와 value (0) | 2023.01.27 |
[React] export default와 export의 차이 (0) | 2023.01.25 |
[React] useNavigate() (0) | 2023.01.25 |
[리액트] onClick 이벤트 여러개 주기 (0) | 2022.12.10 |