function App(){
let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );
function 제목바꾸기() {
let newArray = [...글제목];
// let newArray = 글제목; // 이렇게만 쓰면 값만 공유하는 거다.deep copy를 하기 위해 [...글제목]를 사용.
...를 쓰게되면 -> 값공유x, 서로 독립적인 값을 가지는 복사
결론적으로 하드코딩을 할 필요 없게 됨.
newArray[0] = '여자코트 추천';
글제목변경( newArray );
}
return (
<HTML 많은 곳>
<button onClick={ 제목바꾸기 }> 수정버튼 </button>
<h3> { 글제목[0] } <span>👍</span> { 따봉 }</h3>
</HTML 많은 곳>
)
}제목바꾸기()라고 하면 안됨. 바로 실행 되버림. 버튼을 눌렀을때 실행되야 되기때문에 () 붙이면 안됨!
let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );
글제목에 useState의 인자가 들어가고,
글제목변경(새로운데이터)를 통해 글제목을 아예 대체해버림.
let newArray = [...글제목];
... 를 통해 깊은 복사를 함(주소만 복사하는게 아닌 값까지 복사때림)
이제 값을 공유하는게 아님. 서로 독립적이란 뜻.
깊은 복사가 아니면 하나가 바뀌면 다른 한쪽도 같은 값을 공유하고 있는것이기때문에 엉뚱한것을 가르키게 됨
state값을 대체하는게 아닌 새로운 값을 넣고싶을 때 deep copy
리액트에서 state를 수정할때의 일반적인 패턴
- 수정하고 싶은 state의 deep/shallow 카피본을 하나 생성합니다.
- 카피본을 입맛에 맞게 수정합니다.
- 카피본을 state변경함수()에 집어넣습니다.
가나다순 정렬하는법?
function 정렬하기() {
const newArray2 = [...글제목];
글제목변경( newArray2.sort() );
}
<button onClick = { 정렬하기 }> 버튼2 </button>Q. 글자 변경과 글 순서 정렬한것을 useEffect,setItem,getItem,JSON.parse,JSON.stringify 이용해서 브라우저에 저장해버리기.
Front-Dev