인프런 커뮤니티 질문&답변

wkdejrtlr님의 프로필 이미지
wkdejrtlr

작성한 질문수

따라하며 배우는 리액트 A-Z[19버전 반영]

JSX Key 속성 이해하기

todoData.map 화살표 함수 질문

작성

·

284

0

[JSX Key 속성 이해하기] 파트에서는 todoData에 map 메서드를 사용할 때

 

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

로 return 없이 사용하셨는데 전 기존에는

this.todoData.map((value) => {
              return (
                <div style={this.getStsyle()} key={value.id}>
                  <input type="checkbox" defaultChecked={false} />
                  {value.title}
                  <button style={this.btnStyle}>X</button>
                </div>
              )
            })

이렇게 사용했습니다 둘다 정상 동작하는데 차이점이 뭔지 궁금합니다

답변 1

1

John Ahn님의 프로필 이미지
John Ahn
지식공유자

안녕하세요 중괄호를 사용하면 return 을 이용해야 렌더링되게 됩니다. 중괄호를 이용하면 변수를 생성하던지 조건문을 처리해줄수있습니다. 소괄호를 이용하면 이러한것은 할수없지만 return 없이도 렌더링되게 됩니다 ~ 감사합니다

wkdejrtlr님의 프로필 이미지
wkdejrtlr

작성한 질문수

질문하기