1. Form?

• Form 요소는 위의 예시와 같이 검색바, 로그인/회원가입 등 다양한 사용자 input을 입력받는 곳에서 사용해요.

form 태그에서 주로 사용하는 것

• onSubmit 이벤트
  • <form /> 내부 <button />에 click 이벤트가 발생하면 자동으로 발생해요.
    • 이때 button의 type이 submit이어야 해요.
  • <form /> 내부 <input />에서 Enter 키를 누르면 자동으로 발생해요.
  • 기본 동작은 <form /> 내부 입력 값들로 GET 리퀘스트를 보내요.

2. 제어 컴포넌트와 비제어 컴포넌트

• 예를 들어, 팝업 창이 열리고 닫히는 상태를 관리하는 방법은 2가지가 있어요.
  1. React의 state를 이용하거나
  2. 바닐라 js와 비슷하게 직접 DOM을 조작하는 것이에요.
• 이때, state를 이용해 값을 제어하는 방법을 제어 컴포넌트라고 해요.
• 반대로 state가 아닌 외부 시스템에 의해 제어하는 방법을 비제어 컴포넌트라고 해요.

<aside> 💡

React 입장에서 값을 제어하는지, 제어하지 않는지 생각해 보면 쉬워요!

</aside>

제어 컴포넌트란?

Controlled Component

<aside> 💡

state == input

</aside>

일반적으로 컴포넌트의 상태를 React state를 이용해 제어하는 방식이에요.