[React] 프로젝트 시작/ 리스트와 좋아요

 

 

어제는 React 프로젝트를 생성했다면

 

오늘은 화면을 구성해보겠다.

 

먼저 헤더를 만들어보겠다.

 

 

 

 

 

다음 사진과 같이 App.js에 작성하였다.

ClassName을 black-nav로 해놓고

App.css에 .black-nav를 작성하여 

배경색과 넓이 글자색, 글자 크기 등을 지정해주었다.

 

그러면

 

 

위 사진처럼 헤더가 생성된 것을 볼 수 있다.

 

 

 

 

 

 

잠깐!

 

우리가 React를 썼을 때의 장점은 뭘까?

 

React의 가장 큰 장점은 데이터 바인딩이 쉽다는 것이다.

그래서 Angular나 Vue를 쓰는것이다.

 

그렇다면

데이터바인딩이란 무엇일까?

- 데이터 바인딩은 계속해서 변화하는 데이터들을 서버에서 가져올 수 있다.

 

 

 

 

그럼 계속해서

진행해보겠다.

 

다음은 기본적으로 리스트를 만들어보겠다.

 

그 중 가장 중요하다고 생각하는 

state를 써보겠다.

state를 만드는 이유는 뭘까?

- 웹이 App처럼 동작하게 만들고 싶기 때문이다.

 

 

 

 

그렇다면

state에 데이터를 저장해놓는 이유는 뭘까?

- state는 변경되면 html이 자동으로 재렌더링된다.

 

즉, 우리가 제목을 정렬하거나 수정해도

새로고침을 하지 않고도 html에 렌더링된다는 것이다.

 

하지만 모든 곳에 state를 쓸 필요는 없다.

 

헤더 제목과 같은 데이터는 자주 바뀔 일이 없기 때문에

<div>개발Blog</div>

이런 식으로 써도 되는 것이다.

 

state는 자주 바뀌거나 중요한 데이터를 저장할 때 쓰기에 용이하다.

 

 

 

 

 

그럼 이제 진짜로 이어서 진행해보겠다.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

 

 

리스트는 ClassName을 사용하여 만들었다.

 

 

 

 

다음과 같이 App.js에 className='list'로 지정하고

App.css에는

 

다음과 같이 스타일을 지정해주었다.

 

 

그러면 결과는

 

이처럼 나온다.

헤더와 리스트만 줬는데도 너무 예쁘다.

기분탓인가

 

 

역시 깔끔한게 최고다.

리스트의 제목들이 다 다른 이유는

 

 

 

내가 배열로 useState에 담아뒀기 때문이다.

 

아 혹시나 말하지만

 

이렇게 import문을 작성해줘야 오류 없이 작동된다.

혹시나 누군가에 도움이 될까봐 알려요

 

 

이제는 리스트에 좋아요를 달아보겠다!

 

onClick과 ❤️를 활용해보겠다.

onClick={클릭 시 실행될 함수()}를 써주면 된다.

아니면

onClick={() => {실행될 내용}}을 써줘도 된다.

 

 

useState를 통해 배열로 지정해준뒤

좋아요 개수를 늘려주는 const 좋아요증가로 만들어주었다.

그 후 'onClick={()=> 좋아요증가(0)}' 이런식으로 작성해주면 된다.

 

 

그 결과는

 

 

 

각 글의 좋아요 수가 독립적으로 증가하는 것을 알 수 있다.

 

 

 

 

이제 시각적으로 재미를 주고 싶어서 배너를 배치하려고 한다.

 

 

다음의 코드를 App.js에 작성하고,

 

 

다음의 스타일을 App.css에 작성해준다.

 

 

 

 

 

그럼 이와 같은 결과가 나오는데

화면이 작아보이는 이유는 내가 작은 창에서 캡쳐했기 때문이다.

 

근데 한가지 신기한점은 반응형 웹 페이지와 같이 창을 조절하면 알아서 맞춰준다.

 

뭘까

그냥 우연인걸까

 

이제 더 알아보자.

오늘은 끝!