반응형
지금 디비 연동 없는 리엑트 블로그 연습 중이다.
오늘은 스테이트가 Array타입 일때 변경하는 법에 대해서 알아보자
let [글제목, b] = useState(['남자 코트 추천','강남 맛집 추천' , '파이선독학']);
function s(){
let copy = [...글제목]; //새로운 스테이트를 만들어 줘라.
//기존 스테이트가 어레이나 오브젝트면 독립적 카피본을 만들어서 수정해야한다.
//왜 냐하면 copy과 글제목이 같기 때문에
copy[0] = '여자코트 추천';
console.log(copy == 글제목)
b(copy);
}
<div className='list'>
{/* 온클릭 안에는 항상 함수를 넣어야한다. */}
<h4>{글제목[0]} <span onClick={likeUp}>👍</span> {like}
<span onClick={s}> 추천</span>
</h4>
<p>2월 17일 발행</p>
</div>
추천 버튼을 누르면 여자코트변경으로 바뀌는 코드 이다.
리엑트는 onclick={함수명}으로 onclick이 된다.
함수를 우선 하나 만들어준다.
그 뒤 Array를 카피할 변수하나를 만들어 준다.
그리고 새로운 스테이터스를 만들기 위해
...을 붙혀준다 .
...을 안 붙혀주면 글제목에 있는 변수가 그대로 불러와져 변경이 안된다.
그리고 copy[0] 0번째 인덱스에 스트링타입으로 '여자코트 추천을 써준다.'
그리고 set글제목을 해주면
추천을 누르면 변경된다.
반응형
'React > 블로그 틀 제작 및 & 기초 문법' 카테고리의 다른 글
리엑트 라우터(리엑트에서 페이지전환을!) (0) | 2022.05.15 |
---|---|
리엑트 기초 JSX (State, map,props) (0) | 2022.05.14 |
리엑트 블로그 틀제작 컴포넌트 및 모달 제작 (4) (0) | 2022.05.13 |
리엑트 블로그 틀 제작 JSX 기초문법 (2) (0) | 2022.05.11 |
리엑트 기초 프로젝트 만들기 블로그 틀 제작(1) (0) | 2022.05.11 |