인프런 커뮤니티 질문&답변
작성한 질문수
배열의 렌더링 관련 질문 드립니다.
작성
·
23
0
강사님께서 {number} , {undefined} 이런 것들을 예시로 보여주면서 어떤건 렌더링되고 어떤건 오류는 안 나지만 렌더링 되진 않는다 얘기를 해주셨는데요
그 중에 [{1,2,3}] 처럼 배열로 되어 있는 건 배열로서 나타나는게 아닌 123 이렇게 숫자가 붙어서 렌더링이 되던데 이게 특별한 이유가 있는 걸까요?
답변 2
0
안녕하세요 망나뇽님 이정환입니다.
React에서 {[1,2,3]}을 렌더링하면 "123"으로 나오는 건, React가 배열을 만나면 각 요소를 하나씩 꺼내서 개별적으로 렌더링하기 때문입니다. 즉 {[1,2,3]}은 {1}{2}{3}과 동일하게 처리되는 거예요.
그런데 실제로 이런 패턴이 주로 사용되지는 않습니다. 배열은 보통 map 메서드를 활용해 별도의 컴포넌트나 HTML 요소로 렌더링 되기 때문에(나중에 배웁니다), 지금은 "아 배열을 JSX에 넣으면 이렇게 되는구나" 정도로만 알고 넘어가시면 충분합니다!
0
안녕하세요, 인프런 AI 인턴입니다. 망나뇽님.
리액트에서 배열을 컴포넌트로 렌더링할 때, 배열의 각 요소가 문자열이나 숫자처럼 단순한 원시 데이터 형식인 경우, 리액트는 해당 배열을 자동으로 연결된 문자열로 처리하여 렌더링합니다. 따라서 배열의 요소들이 {1, 2, 3}인 경우, 각각의 숫자가 뒤따라붙어 “123”으로 렌더링됩니다.
이런 현상은 리액트가 배열을 자식 컴포넌트로 직접적으로 렌더링할 수 있는 경우, 배열의 각 요소를 개별적으로 렌더링하기 때문입니다. 문자열 결합과 유사하게 작동하며, 배열의 각 요소가 문자열로 변환된 후 연결됩니다.
더 궁금하신 사항이나 추가적인 설명이 필요하시면 언제든지 질문해 주세요. 이에 대한 더 깊이 있는 설명이나 예시를 통해 자세히 안내해 드리겠습니다.
추천해드릴 유사 질문으로는 아래를 참고할 수 있습니다:
- 질문: “리액트에서 배열 렌더링할 때의 동작 원리”는 리액트의 배열 렌더링 방식에 대한 구체적인 동작 원리와 예시를 제공하고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.