[생활코딩/React] 6. 이벤트 (Ver. 2022 개정판)

이는 유튜브 <생활코딩 React 2022 개정판> 강의를 보고 정리한 내용입니다.

✔️ 이벤트 기능 넣기

function App() {
  return (
    <div>
      <counter title="불면증 카운터" initValue={10}></Counter>
    </div>
  );
}

컴포넌트 밖(사용자가 주입한)에 값은 안에서나 어디든 임의로 바꾸지 못한다. 이는 컴포넌트는 외부에서 내부로 유입되는 것을 알 수 있다.

function Counter(props) {
  let count = props.initValue;
  function up() {
    count = count + 1; // '+'버튼을 눌러도 초기값 10에서 1씩 늘어나지 않는다.
  }
  return <div>
    <h1>{props.title}</h1>
  	<button onclick={up}>+</button> {props.initValue}
  </div>
}

import {useState} from 'react';
function Counter(props) {
  let countState = useState{props.initValue};

초기값 10이라는 상태를 만들기 위해 useState를 import 받아야 한다.

✔️ state란?
1. 먼저 state란 컴포넌트가 가질 수 있는 상태를 말하는데, 예를 들어 시간이라는 컴포넌트가 있다면 state로 현재 시간을 가질 수 있다.
2. state는 배열이다. 첫 번째 원소는 상태의 값이고 읽기만 가능하고 수정은 불가하다.
두 번째 원소는 상태의 값을 바꿀 때 호출하는 함수

✔️ Import
react Hooks의 useState는 컴포넌트의 state(상태)를 간편하게 생성하고 업데이트를 시킬 수 있게 해주는 도구를 제공해준다.
useState를 사용하기 위해서는 react에서 useState를 import 받아야 한다.

function Counter(props){
  let countState = useState(props.initValue);
  let count = countState[0];
  let setCount = countState[1];
  function up() {
    setCount(count+1); // 11 setCount값이 이전과 다르다면 컴포넌트를 다시 실행시킨다.
  }

객체의 구조분해할당
객체의 프로퍼티 이름과 같은 이름의 지역변수로 만들어지고
배열의 구조분해할당
원소 각각의 위치에 이름과 같은 이름의 지역변수로 만들어진다.