중요한 데이터는 변수 말고 state에 담는다
글목록 UI 만들기
주의 return () 안에는 병렬로 태그 2개 이상 기입 금지
JSX 식에는 부모 요소가 하나 있어야 한다고 에러 메세지가 뜬다
부모 요소에 <></> 태그로 감싸주면 된다
state 만드는 법
리액트 에서는 자료를 잠깐 저장할 땐 state를 쓰면 된다
useState를 쓰는데 상단에 import 해야한다
import { useState } from "react";useState() 안에는 저장하고 싶은 데이터를 넣고
이 데이터를 저장하려면 왼쪽에 [ ] 안에 해당 데이터를 뽑아 쓸수 있게 변수를 지정한다
let [a.b] = useState("코트 추천");[a,b] 에서
a -> state에 보관했던 자료
b -> state 변경 도와주는 함수
변수는 직관적으로 정해 써야한다
참고 🤟🥰✍️
Destructring 문법 :
let [a,c] = [1,2]
-> a = 1 c = 2
👉 순서
1. import {useState}
2. useState(보관할 자료)
3. let[작명,작명]
왜 state를 써야 하는가 ❓
데이터를 저장하는데에 있어 변수와 state는 차이점 ->
변수 :
새로운 데이터가 들어와 변경이 되면 일반 변수는 html에 자동으로 반영 안됨
state :
새로운 데이터로 변경이 되면 state를 쓰던 html은 자동 재렌더링 된다
결론은 자주 변경 될거 같은 html부분은 변동시 자동으로 html에 반영되게 만들고 싶을때 state를 쓴다
바뀌지 않는 데이터는 굳이 state에 저장 할 필요 없다(ex- 로고,제목)
state로 저장한 글목록을 만든 화면이다
버튼에 기능개발을 해보자 & 리액트 state 변경하는법
좋아요 버튼 & 갯수 UI만들기
좋아요 를 누르면 숫자의 갯수가 늘어나게 해보자
여기서 state를 데이터가 자주 변경되는 좋아요 "숫자" 에 적용해보자
<li className="list">
<h4>
{logo[0]} <span>❤️</span> 0 <- state로 만들 좋아요 숫자
</h4>
<p>2월 17일 발행</p>
</li>onClick = {} 안에는 함수 이름을 넣어야한다
실행되는 함수는 따로 빼서 return 바깥에 만들어서 onClick안에서 호출 해야함
주의 { } 안에는 실제 값이 아닌 함수를 넣어야 한다
하트를 클릭시 state로 인해 console.log에 숫자 1이 출력되는것이 확인된다
state 변경 하는 법
state 변경함수(새로운 state)
<span onClick={setClickLove(1)}>❤️</span> ❓ state 변경 할때 주의점 : 등호(=)로 변경 금지
ex ) onClick={clickLove = clickLove + 1} 이렇게 하면 안됨
❤️를 onClick될때마다 setClickLove로 변경 되면서 clickLove에 + 1씩 된다
-> 요약
1. onClick 쓰는법
onClick={} 안에는 함수 넣어야함
2. state 변경하는 법
state 변경함수는 () 안에 입력값으로 변경된다
