1. Map 함수를 쓸 때 괄호를 조심하자

  {todoData.map((data) => (
    <div style = {getStyle()} key = {data.id}>
    <input type ="checkbox" defaultChecked={false}/>
      {data.title}~~텍스트~~
  <button style ={btnStyle}></button>
  </div> )) }

해당 문법을 사용할 때 나는 처음에 음~ 그냥 화살표 함수 작성해야지 하고 단순하게 작성했더니 자꾸 빨간불이 떴다.

  {todoData.map((data) => {
    <div style = {getStyle()} key = {data.id}>
                <input type ="checkbox" defaultChecked={false}/>
  {data.title}
  <button style ={btnStyle}></button>
  </div> }) }

일반적으로 내가 알고 있던 화살표 함수의 형식은 아래와 같았길래, 헷갈렸던 것이다.

    (param1, param2, …, paramN) => { statements }
    (param1, param2, …, paramN) => expression
    // 다음과 동일함:  => { return expression; }

    // 매개변수가 하나뿐인 경우 괄호는 선택사항:
    (singleParam) => { statements }
    singleParam => { statements }

하지만 객체 리터럴 형식을 반환하기 위해서는 괄호를 꼭 써야 한다.

 // 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
    params => ({foo: bar})

todoList는 {data.title}이라는 객체 리터럴을 반환하고 있기 때문에 괄호를 넣는 것이다.

2. form와 submit의 관계

<form style ={{ display : 'flex '}} onSubmit = {handleSubmit}>
            <input type = "text" 
            name="value" 
            style ={{ flex : '10', padding : '5px'}}
            placeholder = "해야 할 일을 입력하세요"
            value = {value}
            onChange = {handleChange}
            />
            <input 
              type = "submit"
              value = "입력"
              className='btn'
            />

submit은 form을 제출할 때 트리거가 되는 것이다.
그래서 form의 내용을 제출하고 싶으면 submit을 세팅해서 꼭 사용해야 하는 것이다.
여기서는 input 태그에 submit 타입을 지정해두고, form에 submit 관련 이벤트가 발생하면 handleSubmit이 실행하도록 설정해둔 것이다.

submit 이벤트를 실행시키는 법

1. <input type = "submit">이나, <input type = "image">를 클릭하기
2. 인풋 필드에서 Enter누르기

이 두 방법 모두 submit이벤트를 트리거합니다.

button과의 관계성

button 태그가 가지고 있는 default 값을 알아두자.
form 태그 안에, form data와 관계 없는 button을 만든 이후, 버튼을 눌렀더니 form이 전송되는 현상을 겪을 수 있다. "button와 form을 아무 관계 없이 설정했는데 왜 제출(submit)이 될까?"라는 생각이 든다. 그 이유는 button 태그의 type 속성의 default 값이 submit이기 때문이다.
button 태그의 type 속성값은 input 태그의 type 속성값과 겹친다. 그래서 언제든지 제출의 도구로 사용될 수 있다는 점을 알아두어야 한다.

그런데 주의해야 할 점은 이러한 타입은 type = 'button'일 때만 click 이벤트를 인식하고 발생한다. click 하였을 때 , type이 submit 으로 되어 있으면 작동이 되지 않을 것이다.

button의 디폴트 타입은 submit이고, form 내부에 버튼이 있으면 자동으로 submit이 설정된다. 그리고 click 이벤트를 발생할 땐 button의 타입이 button이어야 한다.

form 요소 정리하기

<form action="/my-handling-form-page" method="post"/>

• action은 데이터를 보낼 URL을 지정합니다.
• method는 어떤 HTTP 방식을 선택할 지 지정하는 것이다. (GET, POST)

form 태그 안에 버튼을 생성해보자. 버튼의 type은 아래 세 가지로 지정이 가능하다.

• submit : 폼 데이터를 form 요소에 action 속성에 설정해둔 웹페이지로 전송
• reset : 모든 폼 위젯을 기본 값으로 바꾼다.
• button : 아무것도 작동하지 않는다. 자바스크립트의 onClick 이벤트 트리거를 걸어두든가 해라.

꼭 버튼을 사용하지 않고, 우리가 위에 쓴 코드처럼 input요소를 사용하여 실제로 버튼인 것처럼 버튼 유형을 만들 수 있다.

그럼 input과 button의 차이점은?

button태그는 전체 HTML 콘텐츠를 전송하는데, input태그는 오직 text만 전송합니다.