[React] 4. 요소에 이벤트 설정 및 state 변경하기

1. onClick

    - 기존 javascript 문법 : element에 onclick으로 실행할 함수 설정

    - React 문법

        · element에 onClick으로 실행할 함수 설정 (c가 대문자)

        · 따옴표(')나 큰따옴표(")가 아닌 중괄호({, })로 감싸기

 

<span onClick={ 함수명() }></span>

       

         · 함수를 따로 만들지 않고 바로 구현할 경우

 

<span onClick={ () => { 실행할 내용 } }></span>

 

 

2. EventListener

    - 기존 javascript 문법 

 

eventTarget.addEventListener('click', function(){ });

 

    - React 문법

 

eventTarget.addEventListener('click', ()=>{ });

 

 

3. state 변경

    - [state, state 변경함수]에서 state 변경함수 이용하기

    - state 변경함수로 변경해야 재렌더링이 잘 처리됨

        Ex) 게시물에 👍(따봉) 아이콘을 누를 경우 +1 되게 하기

 

 

 

❕참고

    ● WARNING

        - 아래와 같이 터미널에 노란색 글씨로 WARNING 메시지가 뜨는 것은 ESLint가 잡아주는 문법 체크사항

        - ESLint란?

            · EcmaScript(javascript) + Lint(에러가 있는 코드에 표시를 달아놓는 것)

               ⇒ javascript 문법에서 에러가 발생하면 표시해 주는 도구

        - ESLint 비활성화 하는 방법

            · 소스 최상단에 /* eslint-disable */ 추가 후 저장

 

 

 

---

참고

• 코딩애플 - React 기초 4강 : 리액트에서 버튼에 이벤트 리스너 (핸들러) 장착하는 법
  https://www.youtube.com/watch?v=Br9fKSIeAok&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=5
  
• Blackeichi - ESLint란?
  https://velog.io/@blackeichi/ESLint%EB%9E%80