공부/React
리액트 TODO 리스트 만들기 : #4 좋아요 💕 기능 만들기
딸기버블티
2022. 11. 17. 21:14
지난 글 까지는 목록 리스트 까지 만들어 봤다.
이제 목록 제목 옆 좋아요 아이콘과 좋아요가 1씩 증가하는 기능을 구현 할 것이다.
# 좋아요 아이콘과 카운트 넣기
App.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
let [글제목,글제목변경1] = useState(['가요 인기 순위', '화장품 브랜드 순위', '패딩 인기 순위']); // 글제목='가요 인기 순위', 글제목변경='가요 인기 순위'를 변경하는 함수
let [좋아요] = useState(0);
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<div className='list'>
<h3>{글제목[0]} <span >💕</span> {좋아요} </h3>
<p>11월 16일 발행</p>
<hr/>
</div>
...생략
|
cs |
좋아요는 변수로 사용할 것이고, 자주 변경하는 값이기 때문에 useState 를 이용한 변수로 쓸 것이다.
글제목 오른쪽에 하트 아이콘과 좋아요 카운트가 표시되는 코드를 추가 해준다.
▲ 결과!!
# 좋아요 증가 함수 만들기
좋아요를 1,2,3...n 이렇게 증가 시켜주려면, 좋아요 변수는 useState 를 사용 했으므로 좋아요 변경 기능도 useState 를 사용해야 한다.
하트 아이콘을 눌렀을 때 좋아요 카운트가 증가되게 하고 싶으므로, span 태그 안에 onClick 이벤트를 사용한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
let [글제목,글제목변경1] = useState(['가요 인기 순위', '화장품 브랜드 순위', '패딩 인기 순위']);
let [좋아요,좋아요변경] = useState(0);
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<div className='list'>
<h3>{글제목[0]} <span onClick={ () => {좋아요변경(좋아요+1)} }>💕</span> {좋아요} </h3>
{/* <span onClick={function() {console.log(1)}} //위와 같음
<span onClick={() => {console.log(1)}} //위와 같음 */}
<p>11월 16일 발행</p>
<hr/>
</div>
...생략
|
cs |
하트 아이콘 클릭 시 좋아요변경 이라는 함수를 호출하고, 좋아요가 1씩 증가하는 코드이다.
변수 사용 시 { } 안에 작성 해줘야 하므로, 변수 변경 함수 호출 시에도 { } 안에 작성 해준다.
▲ 결과!!
더보기
전체코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
/* eslint-disable */
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
let [글제목,글제목변경1] = useState(['가요 인기 순위', '화장품 브랜드 순위', '패딩 인기 순위']); // 글제목='가요 인기 순위', 글제목변경='가요 인기 순위'를 변경하는 함수
let [좋아요,좋아요변경] = useState(0);
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<div className='list'>
<h3>{글제목[0]} <span onClick={ () => {좋아요변경(좋아요+1)} }>💕</span> {좋아요} </h3>
{/* <span onClick={function() {console.log(1)}} //위와 같음
<span onClick={() => {console.log(1)}} //위와 같음 */}
<p>11월 16일 발행</p>
<hr/>
</div>
<div className='list'>
<h3>{글제목[1]}</h3>
<p>11월 16일 발행</p>
<hr/>
</div>
<div className='list'>
<h3>{글제목[2]}</h3>
<p>11월 16일 발행</p>
<hr/>
</div>
</div>
);
}
export default App;
|
cs |