제어 컴포넌트

의미

• 제어 컴포넌트(Controlled Component): prop을 이용해서 엘리먼트의 값을 지정한 경우

특징

• React가 state를 통제할 수 있는 컴포넌트
• 사용자가 입력한 값의 변경 사항에 엘리먼트가 즉각적으로 반응할 수 있음

폼 엘리먼트에 적용하기

요소	값 속성	값을 변경하는 콜백	콜백의 새 값
<input type=”text” />	value=”string”	onChange	e.target.value
<input type=”checkbox” />	checked={boolean}	onChange	e.target.checked
<input type=”radio” />	checked={boolean}	onChange	e.target.value
<textarea />	value=”string”	onChange	e.target.value
<select />	value=”option value”	onChange	e.target.value

예시

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>
      <textarea
        placeholder="여기는 텍스트 영역입니다."
        className="tweetForm__input--message"
        onChange={(event) => setMsg(event.target.value)}
        value={msg}
      ></textarea>
    </div>
  );
}

---

비제어 컴포넌트

의미

• 비제어 컴포넌트(Uncontrolled Component): prop를 사용해서 엘리먼트를 지정하지 않은 경우 → 일반적인 HTML 엘리먼트의 경우
• ref를 통해 값을 가져옴
• 폼 엘리먼트를 예로 든다면, 사용자가 입력하는 값이 변경될 때마다 값이 동기화되는 제어 폼과는 달리 비제어 폼은 폼이 제출되었을 때 값을 가져올 수 있음

제어 컴포넌트와 비교

기준	제어 컴포넌트	비제어 컴포넌트
일회성 값 검색 (ex. 제출할 때)	O	O
제출 시 유효성 검사 (ex. email과 같은 형태의 데이터)	O	O
즉각적인 필드 유효성 검사	X	O
조건부 제출 버튼 비활성화 (ex. ID&PW 입력했을 때만 제출 버튼 활성화)	X	O
입력 형식 적용 (ex. 숫자만 입력 가능함)	X	O
하나의 데이터에 대한 여러 입력	X	O
동적 입력	X	O

---

이벤트 처리 제어

이벤트 처리 문법

• React에서 이벤트 이름은 카멜 케이스(camelCase)로 설정
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달
  • 호출연산자 ()와 함께 함수를 호출한다면, 리턴값이 onClick으로 전달되어서 함수 자체가 전달되는 것이 아니라, 함수의 결과값이 전달되므로 함수 자체를 전달해야함.
  • 또한, 호출연산자 ()와 함께 함수를 호출한다면 렌더링할 때마다 해당 함수가 호출되기 때문에 성능 이슈가 발생할 수 있음

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

자주 사용하는 이벤트 처리 예시

onChange

• 폼(Form) 엘리먼트: 사용자의 입력값을 제어할 때 사용
  (ex. <input>, <textarea>, <select>)
• onChange이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input값을 읽음
• 컴포넌트 return 문 안의 input태그에 value와 onChange를 넣어줌
• onChange는 input의 텍스트가 바뀔 때마다 발생하는 이벤트
  • 이벤트가 발생하면 handleChange함수가 작동하며, 이벤트 객체에 담긴 input값을 setState 를 통해 새로운 state 로 갱신
• 예시

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

onClick

• 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트
  • 버튼이나 <a> 를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트
• onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아닌, 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야함
• 예시

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

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

  const handleChange = (e) => {
    setName(e.target.value);
  }
	//함수 자체를 전달하기
	const handleClick = () => {
		alert(name);
	};

	return (
		  <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={handleClick}>Button</button>
      <h1>{name}</h1>
    </div>
	)
};

select

select tag는 사용자가 drop down 목록을 열어 그중 한 가지 옵션을 선택하면, 선택된 옵션이 state 변수에 갱신됨

• 예시

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

  const handleFruit = (event) => {
		setChoice(event.target.value);
  };

  return (
    <div className="App">
      <select onChange={handleFruit}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </div>
  );
}

pop up

Pop up 의 open 과 close 를 state 를 통해 관리

• 예시

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

  const togglePopup = () => {
    if(showPopup === false) {
      setShowPopup(true);
    }else {
      setShowPopup(false);
    }
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      <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>
  );
}

참고 사이트
Controlled and uncontrolled form inputs in React don't have to be complicated