inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

만들면서 배우는 리액트 : 기초

17 리스트

JS array in JSX

해결된 질문

193

코스피9000기원

작성한 질문수 6

2

function Favorites({ favorites }) {
        return (
          <ul className="favorites">
            {favorites.map((cat) => (
              <CatItem img={cat} key={cat} />
            ))}
          </ul>
        );
      }

map에 의해서 최종적으로 하나의 array가 return 됐을텐데말이죠..

JS에서의 모양 그대로인 array도 문제없이 화면에 나오네요?

개발자도구를 켜보니 자동으로 각 element가 li 태그에 감싸서 보여지는데

 

JSX가 담긴 js array를 JSX 안에 삽입하기만 하면 항상 자동으로 다 이루어지는것인가요?

아님 ul태그 안에서만 작동한다거나.. 무슨 조건이 있는 것인가요?

react javascript

답변 1

0

진유림

JavaScript 의 기본 array는 아니고 유사 배열 형태입니다 :)

console.log 로 찍어보시면 아래처럼 특이한 object가 나올거예요. 

 

리액트는 이 array-like-object를 읽어서 JSX로 그려줍니다.

ul, li등 상관 없이 리액트 엘리먼트는 모두 그릴 수 있습니다 :)

0

코스피9000기원

답변 감사합니당.

저도 유림님처럼 대단한 개발자가 될 거니까 기대해주세요 멍~

0

진유림

강쥐 귀여워요 ㅠㅠ

API 적용 안되는 코드 수정 방법입니다.

0

85

1

고양이 이미지가 엑박이 뜨네요

0

65

1

npx 명령어 사용 불가

1

86

1

const 변수와 컴포넌트의 차이

0

94

1

강의노트

0

146

1

vite로 리액트 빌드한 후 깃허브에 배포하는 방법

0

340

1

빌드할때 dist 폴더가 만들어지는데요,

0

797

1

js파일 업로드 요청

0

139

1

변경된 api 사용시 text 안나오는 문제

0

151

1

메인글자수정...

1

283

3

디렉터리 구조 관련하여 참고할 만한 예시가 있을까요?

1

315

1

https://cataas.com/undefined 로 나오는데 왜그런건가요?

1

609

4

고양이 사진이 깨져요.ㅜㅜ

2

363

3

강의 노트 위치를 모르겠습니다

1

347

1

깃 강의노트 어디서 볼 수 있나요?

1

382

2

이해가 안되는 부분이 있어요

1

366

1

api가 안불러와지네요...

1

671

4

진유림 선생님 너무 궁금해서 질문드립니다 ㅜ

1

338

2

react에서 컴포넌트 만들 때 대문자를 쓰는 이유

2

1162

2

https://cataas.com/ 여기 도메인이 죽어서 이미지가 보이지 않습니다 ㅠ

1

336

2

index.js 내용이 바꼈네용

1

321

2

프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.

1

263

2

html 코드 오류

1

464

2

고양이 이미지 깨져요

1

343

2