1.State 란
:리액트 컴포넌트의 상태, 변경가능한 데이터
-랜더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야함
2.state만드는 법
1)맨 위에 아래 코드 한 줄 작성
import { useState } from 'react';
2)useState('보관할 자료') 로 작성하여 자료를 잠시 저장하거나
만약에 나중에 저장한 자료를 사용하고 싶으면
let [a,b] = useState('사용할 자료') 로 적을 수 있음. a,b는 자유롭게 작명 가능
let [글제목,글제목변경] = useState(['남자 코트 추천','독산동 횟집 추천','가산동 붕어빵 맛집']);
a는 현재 자료를 담고있는 변수명, b는 나중에 state에 담은 자료를 변경하고 싶을 때 사용함(변경을 도와주는 함수)
state는 직접적으로 자료 변경할 수 없다.
더보기
자바스크립트 destructuring문법
:배열 안에 잇는 데이터를 변수로 쉽게 저장하고 싶을 때 사용하는 문법.
let array = ['Kim', 20];
let name = array[0];
let age = array[1];
이렇게 쓸 수 있는 것을
let [name, age] = ['Kim', 20]
이런식으로 더 간편하게 사용할 수 있음
이렇게 작성한 state로 데이터 바인딩도 가능함.
(retrun안에 가장 큰 div는 병렬구조로 작성할 수 없음)
function App(){
let post ='강남 우동 맛집';
let [글제목,글제목변경] = useState(['남자 코트 추천','독산동 횟집 추천','가산동 붕어빵 맛집']);
return (
<div className="App">
<div className="black-nav">
<div>개발 blog</div>
</div>
<div className="list">
<h4>{글제목}</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
)
}
3.state를 사용하는 이유 :
state는 변동사항이 생기면 state를 쓰는 html도 자동으로 랜더링 해줌.
-변경이 자주 일어날 것 같은 데이터는 state로 해두면 좋다.
📚숙제
배열로 데이터 저장 후 데이터 바인딩 해보기
function App(){
let [글제목,글제목변경] = useState(['남자 코트 추천','독산동 횟집 추천','가산동 붕어빵 맛집']);
return (
<div className="App">
<div className="black-nav">
<div>개발 blog</div>
</div>
<div className="list">
<h4>{글제목[0]}</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
<div className="list">
<h4>{글제목[1]}</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
<div className="list">
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
)
}
4.state변경함수 사용하기(좋아요 버튼 구현해보기)
-우선 state를 설정
let[따봉,따봉변경] = useState(0);
state값을 바로 변경할 수 없고 state 선언할 때의 변경함수를 사용하여 작성해야 한다.
안그러면 html재랜더링이 되지 않는다.
-변경함수(새로운state 값)
<div className="list">
<h4>{글제목[0]}<span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h4>
<p>2월 17일 발행</p>
<hr/>
</div>
*JSX에서 onClick사용하는 방법
HTML에는 <div onClick ='실행할 자바스크립트 내용'>으로 작성했지만
JSX에는 <div onClick ={실행할 함수}> 로 작성해야함.
📚글제목 변경 버튼 생성 후 누르면 첫번째 리스트의 제목 변경해보기
<div className="list">
<h4>{글제목[0]}<span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h4>
<p>2월 17일 발행</p>
<button onClick={()=>글제목변경(['여자 코트 추천','독산동 횟집 추천','가산동 붕어빵 맛집'])}>글제목 변경하기</button>
<hr/>
</div>
나의 실수들
더보기
<div className="list">
<h4>{글제목[0]}<span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h4>
<p>2월 17일 발행</p>
<button onClick={()=>글제목변경[0]('여자 코트 추천')}>글제목 변경하기</button>
<hr/>
</div>
이렇게 하면 에러가 뜸
<div className="list">
<h4>{글제목[0]}<span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h4>
<p>2월 17일 발행</p>
<button onClick={()=>글제목변경('여자 코트 추천')}>글제목 변경하기</button>
<hr/>
</div>
단순하게 이렇게 해버리면 문자열(이것도 유사 배열객체)이 하나씩 리스트에 데이터바인딩 되어버림
5.배열, 객체 state 변경하는 방법.
위의 방법보다 더 편리한 방법으로 배열, 객체를 변경하는 방법.
위의 방법은 자료값이 많아지면 가독성이 떨어지는 코드를 작성하게 된다.
<div className="list">
<h4>{글제목[0]}<span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h4>
<p>2월 17일 발행</p>
<button onClick={()=>{
let copy = [...글제목];
copy[0]='여자 코트 추천'
글제목변경(copy)
}}>글제목 변경하기</button>
<hr/>
</div>
*배열이나 객체 자료를 다룰 때는 원본데이터를 직접 조작하는 것보다 기존값을 보존해주는식으로 복사하여 사용한다.
6.state변경함수 동작 원리
-state변경함수는 기존 state === 신규 state이면 변경해주지 않는다.
-let arr = [1,2,3]이런 식으로 기존 배열이 있다고 치면, 이 자료는 램에 저장되고 어디에 있는지 메모리주소값만 가지고 있다.
-만약에 배열을 복사하면, 변수명이 다르다고 해도 각각 자료를 별개로 저장하지 않고 같은 값을 공유한다.
let data1 = [1,2,3];
let data2 = data1;
예를 들어 이렇게 되면 data1에서 변경되면 data2에서도 변경되어 버린다.
그래서
let copy = 글제목;
copy[0] = '여자코트 추천';
글제목변경(copy)
이런 식으로 작성하게 되면 copy와 기존 글제목의 자료가 같다고 생각하여 변경해주지 않는다.
위의 방법으로 전개연산자를 사용하여 독립적인 카피본을 만들어서 수정하는 것이 더 좋음!
📚가나다 순으로 글제목 나열하는 버튼 만들기
<button onClick={()=>{
let copy=[...글제목];//글제목에 저장된 배열 복사하기
let atoz = copy.sort();//복사한 배열 정렬 후 atoz에 저장하기
글제목변경(atoz)//글제목변경. 변경함수를 사용하여 기존 배열을 atoz로 변경함
}}>가나다 순 정렬버튼</button>
