[React_study] 리액트 state변경(useState) & 이벤트 핸들러

* 리액트 state변경하는 방법 (useState)

• state는 state변경함수를 써서 state를 변경해야합니다. 
• state변경함수를 이용하지 않으면 html 재렌더링이 안된다.
• state를 만들때 배열안에 2개까지 작명을 할 수 있다. 두번째 값을 state의 값 변경을 도와주는 함수이다.
  • 해당 함수를 이용해서 state변경이 가능하다.
  • (참고) 관습적으로 set- 이라는 접두사를 붙여서 네이밍을 한다.
  • setState(새로운 state) 형태로 사용한다.

* 예시로 보는 state변경 방법

function App(){

  const [up, setUp] = useState(0);
  
  return (
    <h4> <span onClick={ ()=>{ setUp(up + 1) } }>{ up }</span></h4>
  )
}

 

* 이전 값을 바탕으로 현재 값을 설정 하는 방법

• count값이 다른곳에서 update되면 버그가 발생할 수 있다. (우리가 예상하는 결과값이 출력되지 않을 수 있다.)
• 이를 방지하기위해서 이전 값을 바탕으로 현재 값을 설정하면 버그를 방지 할 수 있다.
• 좀 더 안전하게 값을 설정 할 수 있다.

function App(){

  const [count, setCount] = useState(0);
  
  function handleCountBtn() {
    setCount((prev) =>
      prev + 1
    )
  }
  
  return (
    <h4>
      <span onClick={ ()=>{ handleCountBtn }>{ count }</span>
    </h4>
  )
}

* (이벤트 핸들러 자주사용되는) onClick 사용법

- 일반 html

<div onclick="console.log('click')">

- JSX

<div onClick={()=> { console.log('click') }}>

• Click이 대문자이다.
• {} 중괄호를 사용한다.
• 그냥 코드가 아닌 함수를 넣어야 잘 동작한다.

 

function App(){
  
  function fn(){
    console.log(1)
  }
  return (
     <div onClick={fn}> 안녕하세요 </div>
  )
}

<div onClick={ function(){ console.log('click') }}> 
<div onClick={ () => { console.log('click') }}>

- 함수를 그 자리에서 직접 만들어버려도 된다.

 

[참고] 이벤트 핸들러 종류 및 사용법

https://ko.reactjs.org/docs/events.html

[결론적으로]

1. 클릭시 뭔가 실행하고 싶으면 onClick={함수} 이렇게 이벤트 핸들러를 달아서 사용한다.

2. state를 변경할때는 state 변경함수를 꼭 사용한다.

3. state변경함수는 ( ) 안에 입력한걸로 기존 state를 변경해준다.