오늘은 리액트를 시작하는 날이였다
하지만 첫날부터 이런 고비가...??
이거 jsx 뭐야..?? 왜이래? 내가했던 HTML, JS 어디감...??
여튼 이번 과제는 이름, 사진, 내용 등등이 들어있는
데이터 더미가 주어지고 이 데이터 더미에서
내용을 뽑아와서 구현해보는 과제를 풀었다.
처음에 딱 app.js 보자마자 든생각은 이걸 뭐 어쩌라고??? 어떡하라고
하지만 마음을 다잡고 다시 이해해보니
오?? 이렇게하는건가? 하나씩 맞춰가다보니 생각보다 간단했다.
완성된 브라우저는 다음과 같이 된다.
1. import로 모듈 불러오기
먼저 import 를 통해 export로 내보낸 모듈을 가져온다.
2. Sidebar 컴포넌트 구성
Sidebar 컴포넌트는 위의 브라우저 사진에서 왼쪽 빨간색 사이드바의 컴포넌트다.
i 태그에 클래스를 주어 메신저 아이콘을 붙여 넣을 수 있다.
jsx에서는 항상 className 인거 까먹지말자!!!!
3. Counter 컴포넌트 구성
여기서는 브라우저의 header에 총 더미의 개수가 보여지게 한다.
{`total: ${dummyTweets.length}`} 를 통해
변수로 더미데이터의 길이를 받아올 수 있다.
4. Footer 컴포넌트 구성
Footer에서는 크게 건드릴거 없이 시멘틱 엘리먼트 footer를 포함시키면 됐고,
Features 컴포넌트에 자식컴포넌트로 집어 넣어주기만 하면 됐다.
5. Tweets 컴포넌트 구성
가장 어려웠던 Tweets 컴포넌트다.
jsx가 익숙하지 않다보니 img 하나주는것도 헷갈렸다.
img태그에 src속성에 중괄호를 통해 데이터를 불러올 수 있고,
삼항연산자를 통해 tweet.username이 'parkhacker'인 경우일때
'tweet__username tweet__username--purple'를 클래스로 주고
아닐경우엔 'tweet__username을 클래스로 준다.
꼭 기억해야할 건 변수나 값을 넣어줄땐 무조건!!! 중괄호{} 를 붙여야한다!!
6. Features 컴포넌트 구성
Features 컴포넌트에서는 Counter, Tweets, Footer 컴포넌트를
자식 컴포넌트로 받아서 3개의 컴포넌트 파일을
불러들여온다.
위에서 작성했던 3개의 각 컴포넌트 구성이
여기서 실행된다고 보면된다!!
7. App 컴포넌트 구성
실질적으로 지금까지 구성했던 모든 컴포넌트를 실행해주는 곳이
바로 여기 App컴포넌트이다.
여기로 모든 컴포넌트들이 합쳐져서 실행이 된다는 뜻이다.
Counter, Tweets, Footer 컴포넌트들이 포함된 Features컴포넌트,
Sidebar컴포넌트까지 합쳐져서 브라우저가 랜더링이 되는 것이다.
8. export로 모듈 내보내기
export는 변수, 함수, 클래스 앞에 export 키워드를 붙여서
모듈의 기능을 외부에서 사용할 수 있게 내보내는 역할을 한다.
