배열의 렌더링 관련 질문 드립니다.
강사님께서 {number} , {undefined} 이런 것들을 예시로 보여주면서 어떤건 렌더링되고 어떤건 오류는 안 나지만 렌더링 되진 않는다 얘기를 해주셨는데요
그 중에 [{1,2,3}] 처럼 배열로 되어 있는 건 배열로서 나타나는게 아닌 123 이렇게 숫자가 붙어서 렌더링이 되던데 이게 특별한 이유가 있는 걸까요?
Answer 2
0
안녕하세요 망나뇽님 이정환입니다.
React에서 {[1,2,3]}을 렌더링하면 "123"으로 나오는 건, React가 배열을 만나면 각 요소를 하나씩 꺼내서 개별적으로 렌더링하기 때문입니다. 즉 {[1,2,3]}은 {1}{2}{3}과 동일하게 처리되는 거예요.
그런데 실제로 이런 패턴이 주로 사용되지는 않습니다. 배열은 보통 map 메서드를 활용해 별도의 컴포넌트나 HTML 요소로 렌더링 되기 때문에(나중에 배웁니다), 지금은 "아 배열을 JSX에 넣으면 이렇게 되는구나" 정도로만 알고 넘어가시면 충분합니다!
0
안녕하세요, 인프런 AI 인턴입니다. 망나뇽님.
리액트에서 배열을 컴포넌트로 렌더링할 때, 배열의 각 요소가 문자열이나 숫자처럼 단순한 원시 데이터 형식인 경우, 리액트는 해당 배열을 자동으로 연결된 문자열로 처리하여 렌더링합니다. 따라서 배열의 요소들이 {1, 2, 3}인 경우, 각각의 숫자가 뒤따라붙어 “123”으로 렌더링됩니다.
이런 현상은 리액트가 배열을 자식 컴포넌트로 직접적으로 렌더링할 수 있는 경우, 배열의 각 요소를 개별적으로 렌더링하기 때문입니다. 문자열 결합과 유사하게 작동하며, 배열의 각 요소가 문자열로 변환된 후 연결됩니다.
더 궁금하신 사항이나 추가적인 설명이 필요하시면 언제든지 질문해 주세요. 이에 대한 더 깊이 있는 설명이나 예시를 통해 자세히 안내해 드리겠습니다.
추천해드릴 유사 질문으로는 아래를 참고할 수 있습니다:
- 질문: “리액트에서 배열 렌더링할 때의 동작 원리”는 리액트의 배열 렌더링 방식에 대한 구체적인 동작 원리와 예시를 제공하고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
프론트엔드 학습 수준 문의
0
8
1
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
34
2
데이터 로딩중 화면만 계속 나와요!!
0
47
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
70
2
이후의 커리큘럼 문의
0
97
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
45
2
최적화 관련 질문있습니다 (useMemo 등)
0
81
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
77
3
Date 객체에 관련하여 질문드립니다.
0
80
2
리액트 개정판 교재 질문
0
56
2
예제코드가 안나와요!
0
72
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
101
2
onMouseEnter 관련 문의 드립니다
0
87
3
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
108
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
130
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
65
1
vs code 자동완성관련 문의
0
102
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
173
2
87강 필터 함수 질문
0
63
2
useRef, useState count 비교
0
62
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
84
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
72
2
투두리스트 실습을 충실히 진행한 상태에서 감정일기장 실습을 따라할 필요가 있을까요?
0
53
2
83강 css 질문입니다
0
51
2