React Twittler Intro

과거 리액트란 무엇인가... 의 문만 열어본 자로써 전날 밤 유튜브 강의 몇 개를 보고 오늘 바로 리액트 과제를 받았다.

다행히 아주아주 기초적인 부분을 다루는 과제라서 다행이었지만 앞으로의 나날들이,,,,,,, 어지럽다! 😊

일단 완성해야하는 화면은 이렇게 생겼다.

각각의 컴포넌트를 완성하고 구성해 주면 된다.

 

1. sidebar 컴포넌트 구현

- Font Awesome라이브러리를 사용해서 아이콘을 만들어준다.

- jsx는 class역할을 하는 어트리뷰트 이름이 className이다.

2. Counter 컴포넌트

- dummydata로 전달되는 트윗의 개수를 total 값에 입력을 해줘야 한다.

- react에서 데이터는 항상 {중괄호} 안에 있어야 한다.

3. footer 컴포넌트

- 웹페이지 하단을 의미하는 시멘틱 태그인 <footer> 태그를 사용한다.

4. Tweets 컴포넌트

<트윗 저자 이미지 넣기>, <유저 이름 넣기>, <트윗 메시지 적기>

- <img>의 src 어트리뷰트에는 데이터가 들어가기 때문에 {중괄호}를 사용하여 더미데이터 객체의 "picture"라는 키의 값을 넣어준다.

- 유저이름에는 "username" 키값을, 생성일자에는 "createdAt", 트윗 메시지에는 "content"를 넣어준다.

 

+ <특정 이름 배경색 추가하기>

1 - 더미데이터의 "username"키의 값이 "parkhacker"인 경우를 변수로 선언해 준다.

2 - JSX에서 조건부 렌더링에는 if문이 아닌 삼항연산자를 사용한다.

1의 조건이 맞으면 색깔이 바뀌는 이름을, 아니라면 일반 클래스 이름을 넣어줄 수 있는 변수를 선언한다.

3 - <span> 태그 안에 2에서 만들어둔 조건부에 따라 변하는 변수를 넣고 내용은 "username"으로 한다.

 

5. 컴포넌트 구성

이렇게 보면 안 안 와닿을 수 있어서 그림으로 그려보았다.

이 그림이 바로 리액트의 최대 장점이라 할 수 있다.

기능별로 묶인 컴포넌트를 생성해서 위 코드와 같이 구조적 정렬을 해주면 간단하게(?) 웹페이지를 구성할 수 있다...........!

 

html과 css, javascript로 상상의 나래를 펼쳐가며 구조를 만들어갔던 그때여.... 빠빠..