[React] 버튼에 기능 개발 & 리액트 state 변경

좋아요 버튼 & 갯수 UI 만들기

let [따봉, 따봉변경] = useState(0);

state 변수를 위와 같이 정의했을 경우

<h4>{글제목[0]} <span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h4>

위 태그에 대응되는 출력물을 클릭하면 받은 '따봉'의 갯수를  1씩 증가되도록 작성했다.

onClick 속성을 사용하여 함수를 호출시켜야 하는데 ()=>{} 에서 중괄호 안에 함수이름을 작성한다.

함수 이름은 '따봉'의 state 변경용 함수인 '따봉변경'을 사용해야만 한다.

 

array/object state 사용 방법

 1) state 변수 선언

let [글제목,글제목변경] = useState(['Hi','안녕하세요','채로입니다']);

  2) onClick을 통한 state 변경 함수 작성 및 버튼 생성

<span onClick={()=>{글제목변경(['Hi2','안녕하세요2','채로입니다2'])}}>😂</span>

  3) 코드 내 사용법

<div className="list">
        <h4>{글제목[0]} <span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h4>
        <span onClick={()=>{글제목변경(['Hi2','안녕하세요2','채로입니다2'])}}>😂</span>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
  <h4 style={{color : 'red', fontSize : '30px'}}>{post}</h4>
</div>

  4) 출력 결과

스마일 버튼 클릭 전

스마일 버튼 클릭 후

 

하지만 위처럼 코드를 작성하게 되면, state 내부에 많은 인덱스들이 사용될 경우 사용이 너무 번거롭다.

또한 기존에 state에 저장된 내용들이 바뀌어버리기 때문에 후에 재사용도 어렵다.

 

기존의 state 값은 유지하면서 값 변경하기

  1) 기존 state 변수

let [글제목,글제목변경] = useState(['Hi','안녕하세요','채로입니다']);

  2) state 변수 변경을 위한 button

<button onClick={()=>{
    let copy=[...글제목];
    copy[0]='Hi3';
    글제목변경(copy);
}}>글수정</button>

만약 위와 달리 let copy = 글제목; 이라고 copy를 정의하면 버튼을 눌러도 값이 변경되지 않는다.이유는 copy가 기존의 '글제목' 객체의 주소를 그대로 참조하기 때문에React에서는 state내부가 변경되었음을 인지하지 못해 값이 즉각적으로 변경되지 않기때문이다.

 

따라서 [... ] 로 기존의 객체 또는 배열을 묶어줌으로써새로운 객체 또는 배열을 생성해 state가 변경되었음을 React가 알게해줘야 정상적으로 값이 변경된다.

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌