map을 통해 표현식 출력 때는 ()로 JSX태그를 감싸야한다.

선언형(declaration) 함수를 map() 내부에서 직접 사용하는 것은 일반적으로 권장되지 않습니다. 선언형 함수는 별도의 블록({}) 안에 정의되고 이름을 가지며, 이러한 함수를 map() 같은 고차 함수의 인자로 바로 넣는 것은 문법적으로 부적합할 수 있습니다.

 

출력 x

 

{}로 감싸면 안됨

{this.todoData.map((data) => {

            <div style={this.getStyle()} key={data.id}>

            <input type="checkbox" defaultChecked={false} />

              {data.title}

            <button style={this.btnStyle}>x</button>

          </div>

          })}

 

---

 

정상 출력

 

()로 감싸서 출력

{this.todoData.map((data) => (

            <div style={this.getStyle()} key={data.id}>

            <input type="checkbox" defaultChecked={false} />

              {data.title}

            <button style={this.btnStyle}>x</button>

          </div>

          ))}