리엑트 블로그 틀제작 Status 스테이터스 변경 (3)

 

지금 디비 연동 없는 리엑트 블로그 연습 중이다. 

오늘은 스테이트가 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글제목을 해주면 

추천을 누르면 변경된다.