Coding Apple, React 강좌 내용 정리.4 - state 변경 (버튼 기능 개발)

버튼 기능 개발 & 리액트 state 변경하기

먼저 크롬 브라우저에서 이모지 표시 tip

크롬의 주소 입력창에 마우스 오른쪽 버튼 클릭하면 그림 이모티콘이 항목이 나온다.

크롬 주소입력창에 마우스 오른쪽 버튼 > 그림 이모티콘 or 윈도쿠키 + .

클릭 이벤트 설정하기

: onClick={ 클릭될 때 실행할 함수 }

           ={ ()=> {실행할 내용} }

 

state는 그냥 변경이 안 된다. useState 만들 때 만들어둔 함수를 이용한다

let [좋아요, 좋아요변경] = useState(0); // 초기값으로 0
---

클릭할 경우, 변경 함수를 이용해서 값을 넣는다.
<h3>{글제목[0]} <span onClick={ ()=> {좋아요변경(100) } }>👍</span>{좋아요}</h3>

let [좋아요, 좋아요변경] = useState(0);

<h3>{글제목[0]} <span onClick={ ()=> {좋아요변경(100)}}>👍</span>{좋아요}</h3>

// 만약 값을 1 씩 증가시키려 할 때
<h3>{글제목[0]} <span onClick={ ()=> {좋아요변경(좋아요+1)}}>👍</span>{좋아요}</h3>

 

클릭 전과 후 (클릭시 강제적으로 값을 100으로 변경

state 변경 함수로 변경해야, 재 렌더링이 잘 일어난다.

array로 된 state를 변경할 때는, 직접 변경은 안된다.

ex)

var [글제목, 글제목변경] = useState(['남자코트추천', '강남맛집', '강서맛집']);

글제목[0] = '여자코트추천' (html에 반영이 안 된다)

 

1. 하드 코팅 : 글제목변경( ['여자코트추천','파이썬 학습','React 학습'] );

2. array 깊은 복사본 (deep copy) 을 만들기

(X) var newArray = 글제목; // 값 공유

(O) var newArray = [...글제목]; // 값 공유 X , 서로 독립적인 값을 가지는 복사

var [글제목, 글제목변경] = useState(['남자코트추천', '강남맛집', '강서맛집']);
  function fn(){    
    var newArray = [...글제목];
    newArray[0] = '여성코트추천';
    글제목변경(newArray);
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <button onClick={fn}>변경하기</button>

<쉬운듯 어려운듯. 거의 기초만 들어간건데...>