[부트캠프 React] 210910 리액트 기초 복습(3)-2

밍징·2021년 9월 11일

개념복습_ver.

목록 보기

17/30

📌 React의 이벤트 처리

백문이 불여일견. react가 이벤트를 처리할 때는 아래와 같다.

<button onClick={handleEvent}>Event</button>

1) onChange

제대로 된 설명은 아래 코드를 참고하면서 보는 게 좋을 듯 하다.

function NameForm() {
  const [name, setName] = useState("");
  const handleChange = (e) => {
    setName(e.target.value);
  }
  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

input태그 textarea태그 select태그 와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는데 사용된다. onChange 이벤트가 발생하면 e.target.value 를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있다. onChange 는 input 의 텍스트가 바뀔 때 마다 발생하는 이벤트. 이벤트가 발생하면 handleChange 함수가 작동하며, 이벤트 객체에 담긴 input 값을 setState 를 통해 새로운 state 로 갱신.

2) onClick

onClick 이벤트는 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트. 버튼이나 a 태그 를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트이다. 아래 코드는 onChange 예시에 버튼을 추가하여 버튼 클릭 시 input tag 에 입력한 이름이 alert을 통해 알림창이 팝업되는 코드이다.

function NameForm() {
  const [name, setName] = useState("");
  const handleChange = (e) => {
    setName(e.target.value);
  }
  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>//요기를 주목하도록 한다. 
      <h1>{name}</h1>
    </div>
  );
};

onClick 이벤트에 alert(name) 함수를 바로 호출하면 컴포넌트가 렌더링될 때 함수 자체가 아닌 함수 호출의 결과가 onClick 에 적용된다

❗주의할 점

onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 아래와 같이 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달

주의할점에 대한 예시는 아래 코드를 참고해보자

// 함수 정의하기
return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};
// 함수 자체를 전달하기
const handleClick = () => {
  alert(name);
};
return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};

3) select 태그

select tag 는 사용자가 drop down 목록을 열어 그 중 한가지 옵션을 선택하면, 선택된 옵션이 state 변수에 갱신. (아래는 그냥 코드를 계속 따라 적어보면서 익히는 수 밖에 없겠다..?)

import React, { useState } from "react";
import "./styles.css";
function SelectExample() {
  const [choice, setChoice] = useState("apple");
  const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
  const options = fruits.map((fruit) => {
    return <option value={fruit}>{fruit}</option>;
  });
  console.log(choice);
  const handleFruit = (event) => {
    setChoice(event.target.value);
  };
  return (
    <div className="App">
      <select onChange={handleFruit}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </div>
  );
}
export default SelectExample;

차근차근 순서를 한번 보자.

첫번째, 변화가 일어나는 태그는 바로 select태그 이다. 그러므로 select태그에 onChange이벤트를 작성한다. (onChange에서는 갱신함수인 setChoice를 작성하고 거기에서 target.value 작성 )

onChange에는 갱신함수가 담겨있는 handleFruit를 작성

두번째, options 컴포넌트를 변화가 일어나는 select태그에 작성. 이 options컴포넌트는 map화 되어있다.

세번째, h3 태그에 저장변수인 choice를 써준다.

그러면 select태그가 변화가 일어날 때마다 choice 값도 계속 바뀐다.

5) React Controlled Component

React에서는 이렇게 상태에 해당하는 데이터를 state로 따로 관리하고 싶어하는데, 이렇게 React가 state를 통제할 수 있는 컴포넌트를 Controlled Component 라고 한다.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

이걸 기억한다!

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [username, setUsername] = useState("");
  const [msg, setMsg] = useState("");
  return (
    <div className="App">
      <div>{username}</div>
      <input
        type="text"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
        placeholder="여기는 인풋입니다."
        className="tweetForm__input--username"
</input>
      <div>{msg}</div>
      {/* TODO : 위 input과 같이 입력에 따라서 msg state가 변할 수 있게 아래 textarea를 변경하세요. */}
      <textarea
        placeholder="여기는 텍스트 영역입니다."
        className="tweetForm__input--message"
        onChange={(event) => setMsg(event.target.value)}
        defaultValue={"hello world"}
        value={msg}
</textarea>
    </div>
  );
}