[React] 이벤트 처리 & Controlled Component & React 데이터 흐름

 

 

 

 

 

📌리액트 개념

 

 

📍이벤트 처리( Event handling )

 

React 에서 이벤트는 소문자 대신 카멜 케이스를 사용

JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달

 

<button onclick="handleEvent()">Event</button> // html
<button onClick={handleEvent}>Event</button> // react

 

 

 

🔗 onChange

 

폼(Form) 엘리먼트 (<input><textarea><select>) 는 입력값을 제어하는 데 사용

변경될 수 있는 입력값 -> 컴포넌트의 state로 관리

 

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value); // onChange 이벤트가 발생하면 e.target.value를 통해 input 값을 읽어옴
  }

  return (
    <div>
    {/* input태그 안에 value와 onChange(텍스트가 바뀔 때 발생하는 이벤트)를 넣어줌
    	이벤트가 발생하면 handleChange 함수가 작동 새로운 state로 갱신 */}
      <input type="text" value={name} onChange={handleChange}></input> 
      <h1>{name}</h1>
    </div>
  )
};

 

 

 

onChange 실습

 

 

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);
  };

 

 

 

실행결과

 

 

옵션을 선택할 때마다 text가 변경됨이 확인 가능하다

 

 

🔗 onClick

 

사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트

 

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
    {/* input tag 에 입력한 이름이 alert을 통해 알림 창이 팝업 되도록 코드를 추가 */}
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

 

 

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

리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달

 

// 함수 정의하기

return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};

// 함수 자체를 전달하기

const handleClick = () => {
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};

 

 

onClick 실습

 

 

import "./styles.css";
import React, { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleClick = () => {
    alert(name);
  };
  return (
    <div className="App">
      <h1>Event handler practice</h1>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={handleClick}>Button</button> // 함수를 호출(이 방법을 더 선호)
      <button onClick={() => alert(name)}>Button</button> // 함수를 선언 및 호출
      <h3>{name}</h3>
    </div>
  );
}
export default NameForm;

 

 

실행 결과 두가지 버튼 모두 alert이 뜨는 것이 확인 가능하다

 

 

 

 

popup 실습

 

 

import React, { useState } from "react";
import "./styles.css";

function App() {
  const [showPopup, setShowPopup] = useState(false);

  const togglePopup = (e) => {
    // Pop up 의 open/close 상태에 따라
    // 현재 state 가 업데이트 되도록 함수를 완성하세요.
    if (showPopup === false) {
      setShowPopup(true);
    } else setShowPopup(false);
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      {/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동하도록
          button tag를 완성하세요. */}
      <button className="open" onClick={togglePopup}>
        Open me
      </button>
      {showPopup ? (
        <div className="popup">
          <div className="popup_inner">
            <h2>Success!</h2>
            <button className="close" onClick={togglePopup}>
              Close me
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default App;

 

 

실행결과

 

 

 

 

 

 

🔗Controlled Component

 

리액트가 state을 통제할 수 있는 컴포넌트를 컨트롤 컴포넌트라고한다.

 

 

 

controlled component 실습

 

 

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)}
        value={""}
      ></textarea>
    </div>
  );
}

 

 

 

실행 결과

 

 

 

 

 

 

 

🔗 React 데이터 흐름

 

페이지 단위 x -> 컴포넌트 단위 o

컴포넌트를 만들고 다시 페이지를 조립

컴포넌트는 상향식(bottom-up)으로 제작 -> 테스트가 쉽고 확장성이 좋다

트리구조로 컴포넌트를 만든다

데이터를 어디에 둘지 결정

컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자 혹은 속성 처럼

전달받을 수 있다.

데이터를 전달하는 주체 -> 부모 컴포넌트 : 데이터 흐름이 하향식(top-down)임을 의미

단방향 데이터 흐름(one-way data flow)

컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 알 수 없음

상태는 최소화하는 것이 좋다(복잡성 때문)

 

- 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.

- 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.

- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

 

상태를 어디에 위치시켜야 하는지 살펴봐야 한다

A component , B component -> parent component 라면, parent 의 상태를 위치