ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [React] 버튼 기능개발, 리액트 state 변경하기
    🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 12. 10:20

    좋아요 버튼 만들기

    span 태그를 누르면 숫자가 1씩 증가하게끔 해야한다.

     

    기존에 JavaScript로 구현할 때, addEventListener나 onclick 메소드를 사용했었다.

    리액트에서도 onClick={클릭될때 실행할 JS}를 사용할 수 있다.

    주의사항은 click을 적을 때 대문자로 적어야하고, JS를 { 함수() } 괄호로 감싸주어야 한다!

    익명함수도 가능하다! { () => {} }이런식으로 적으면 된다. 

     

     

    let [따봉, 따봉변경] = useState(0);
    
    return (
    
          <span onClick={() => { 따봉변경(따봉 + 1) }}>👍🏻</span> {따봉}
    
    )

    위와 같이 state변경함수로 변경해야 재렌더링이 잘 일어난다. 스무스~!

     

    단순히 함수 이름을 넣을 때 onClick = { 제목바꾸기() } 하면 함수가 바로 실행되서, 버튼을 눌렀을 때 실행하게 해야하므로, ()는 빼야 한다.

    onClick = { 제목바꾸기 } 가 맞다.

     

    State 수정할 때 직접 원본수정은 안된다. deep copy해서 수정해야 한다.

    state를 수정하고 싶으면, 복사를 한뒤, 복사한 것을 수정한다. 

    const 제목바꾸기 = () => {
        let newArray = 글제목;
        newArray[0] = '구두 추천';
        글제목변경(newArray);
    }

    위와 같이 하면 안된다. 위는 복사가 아니라 값 공유이다! 글제목과 newArray변수는 똑같은 값을 공유하고 있는 것이다.

    reference data type의 특징이다.

    deep copy를 해야한다. 완전히 다른 별개의 복사본을 만들면 된다!

    암기!!!!

    const 제목바꾸기 = () => {
        let newArray = [...글제목];
        newArray[0] = '구두 추천';
        글제목변경(newArray);
    }

     

    deep copy는 서로 값 공유가 일어나지 않고, 완전히 새로운 복사본을 만들어준다.

    ... spread operator는 중괄호, 대괄호 다 제거해준다. 그 다음 다시 [] 로 담으면 완전히 별개의 Array가 된다.

    리액트 대원칙!!!! immutable data! 직접 변경하면 안된다~! 권장한다.

     

    총정리

    1. Array, Object state 데이터 수정 방법 : 일단 변경함수 써야한다.

    2. 변경함수에 원래 들어간 데이터 자료혀오가 똑같이 변경함수(대체할 데이터) 넣어준다.

    3. state는 직접 건들면 안된다.  deep copy해서 수정해야 한다.

     

     

    댓글

ahntoday