react onClick Event (Feat.wonya)

아령하세요~~~~IT

 

다들 create-react-app 은 하셨쥬?

 

결과부터 보시죠

이거 해볼게요.~완성본

 

App.js 에서 진행해 볼게요.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  return (
    <div className='app'>
      <h1>할룽 할룽</h1>
      <p> {count} </p>
      <button onClick={() => setCount(count + 1)} >증가</button>
    </div>
  );
}

export default App;

useState 이라는걸 사용해서 첫번째는 변수명 두번째는 그 값을 변경시킬수 있는 변수명을 선언한다고 생각하시면 편한것 같아요.

그래서 클릭할때마다 setCount(count + 1) 함수를 실행시켜서 값을 증가시키고 있어요.

 

주의사항

react는 onClick 카멜체로 쓴다.

 

class 형식에서는 this.props.count 어쩌구 해야 한다는데 저는 잘 모르겠어요 함수형으로 다 오세요~

 

 

=> 이거 쓰는게 헷갈리시는분들은 밑에걸 참고해 주세요.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  return (
    <div className='app'>
      <h1>할룽 할룽</h1>
      <p> {count} </p>
      <button onClick={
        function() {
          setCount(count + 1)
        }
      } >증가</button>
    </div>
  );
}

export default App;