[🍎코딩애플 강의요약] React에서 버튼 기능과 State 변경하기 📱

개요 📋

이 강의는 React에서 버튼에 기능을 추가하고 state를 변경하는 방법을 다룹니다. 좋아요 버튼을 통해 실습해 봅니다.

주요 내용 🔍

eslint 경고 처리하기 ⚠️

• 터미널이나 브라우저에 표시되는 노란색 warning은 개무시 가능
• eslint는 코딩 관습을 교정해주는 도구
• 무시하려면 파일 최상단에 /*eslint-disable*/ 주석 추가

좋아요 버튼 구현하기 👍

<h4>{글제목[0]} <span>👍</span> 0</h4>

• 자주 바뀔 내용은 state로 저장 필요
• 좋아요 갯수는 변동될 수 있으므로 state로 관리

onClick 이벤트 처리하기 🖱️

// JSX에서의 클릭 이벤트 문법
<div onClick={실행할함수}>내용</div>

중요 포인트:
1. onClick의 C가 대문자
2. 중괄호 {} 사용
3. 함수를 넣어야 함

함수 사용 방법 🧩

// 방법 1: 미리 함수 정의
function 함수임() {
  console.log(1)
}
<div onClick={함수임}>안녕하세요</div>

// 방법 2: 익명 함수 직접 작성
<div onClick={function() { 실행할코드 }}>
<div onClick={() => { 실행할코드 }}>

• () => {} 는 function(){} 와 동일한 기능

state 변경하는 법 ⚛️

let [따봉, 따봉변경] = useState(0);

핵심:

• state는 일반 변수처럼 직접 수정 불가 (따봉 = 따봉 + 1 ❌)
• state 변경함수를 사용해야 함
• 따봉변경(새로운state) 형식으로 사용
• 예: 따봉변경(따봉 + 1)

완성된 좋아요 버튼 코드 🔄

function App() {
  let [따봉, 따봉변경] = useState(0);
  return (
    <h4>
      {글제목[0]} 
      <span onClick={() => { 따봉변경(따봉 + 1) }}>👍</span> 
      {따봉}
    </h4>
  )
}

요약 정리 📌

1. 클릭 이벤트: onClick={함수} 형태로 사용
2. state 변경: 반드시 state 변경함수 사용
3. state 변경함수는 괄호 안의 값으로 기존 state를 대체