[React] 좋아요 버튼 기능 생성하기 (onCilck 버튼 누르면 +1 증가,개별증가)
useState문법
상태변수는 초기값을 갖고 있다.
해당 state변수의 값은 상태변경함수()만 사용해서 해당 값을 변경할 수 있다.
let [상태변수, 상태변경함수] = useState( 초기 값)
useState로 좋아요 기본 state 변수 값 셋팅
- like 상태 변수 초기값 : 0
버튼을 누를 때 1씩 증가해야함으로 숫자 0으로 설정하는 것이다. - setLike 상태변경함수 설정
버튼을 누를 때 1씩 증가해 줄 함수, 상태변경!
let [like, setLike] = useState(0);
// 블로그 이름 목록 초기 셋팅
let [blogName, setBlogName] = useState([
"코딩학원 추천","온라인 코딩 강의 추천","개발 블로그 추천",
]);
좋아요 누를 경우 숫자 올라가는 기능
- onClick 이벤트 사용 : 👍 누를 경우 {()=>{코드실행}} 중괄호 내의 함수가 실행된다.
- setLike(like + 1); 상태변경함수 사용: 상태변경함수() 소괄호 내에 like 기존의 상태변수 기본값 0에 +1을 더해주는 식을 담아준다.
- 버튼을 눌러 onClick={() => { setLike(like + 1); }} > 상태 변경 함수가 실행될때마다 +1씩 증가된다.
<div className="list">
<h3> {blogName}
<span onClick={() => { setLike(like + 1); }} > 👍 </span> {like} </h3>
<p>3월 02일 발행</p>
<hr />
</div>
- 1번째 글의, 좋아요 버튼 5번 누른다면? 모든 글의 좋아요 수가 5로 바뀐다!
개별로 좋아요 개수 증가시키려면?
=> 이 방법의 단점, 데이터가 증가할때마다 [0,0,0,0] 0을 계속 추가해줘야한다!
후에 데이터가 입력될때마다 알아서 되게끔 해보자
- 좋아요 수를 올리는 상태변수 like 초기값 : [0,0,0]
- 배열을 이용하여 블로그 네임 데이터 개수만큼 초기값을 맞춰준다.
let [like, setLike] = useState([0, 0, 0]);
map의 특성을 활용하여, 버튼을 눌렀을때 즉 onclick했을 때 like의 개수가 1씩 증가하도록 한다.
-
map 1 번째 인자 el : 각 요소 한개, 제목 한개(순서대로)
-
map 2 번째 인자 i : 각 요소의 인덱스, 위치를 나타낸다.
-
변수 하나 생성하여 like [0,0,0] 배열 값을 복사해서 갖고 온다.
- 깊은 복사! 스프레드 문법 -
likeCnt[i]++ : 버튼을 누르면 해당 글 번호에(인덱스) 해당되는 like좋아요 i번째 요소인, 0 에 +1을 더해준다.
-
setLike(likeCnt) : 상태변수함수를 사용해서 +1더해진 값으로 상태변수 like를 바쒀준다.
-
{like[i]} : 해당 글번호와 같은 좋아요 요소(1이 더해진)를 출력한다.
{blogName.map((el, i) => {
return (
<div className="list" key={i}>
<h3>
{el}
<span
onClick={() => {
let likeCnt = [...like];
likeCnt[i]++;
setLike(likeCnt);
}}
>
👍
</span>
{like[i]}
</h3>
<p>3월 02일 발행</p>
<hr />
</div>
);
})}
1번째 글의 좋아요를 누르면? 1번째 글의 좋아요만 올라간다!
Author And Source
이 문제에 관하여([React] 좋아요 버튼 기능 생성하기 (onCilck 버튼 누르면 +1 증가,개별증가)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@estell/React-좋아요-버튼-기능-생성하기-omCilck-버튼-누르면-1-증가저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)