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

한영훈님의 프로필 이미지
한영훈

작성한 질문수

처음 만난 리액트(React)

여러 개의 Component 렌더링 하기

Chapter_10 수업에서 했던 예시를 스스로 구현하고 싶은데 방법을 모르겠어요

작성

·

157

1

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((a) => <li>{a}</li>);

ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root'));

이 예시를 강사님처럼 리액트로 만들고 싶은데 이때 index.js를 어떻게 해야하나요?

#수업질문

답변 1

0

Inje Lee (소플)님의 프로필 이미지
Inje Lee (소플)
지식공유자

안녕하세요, 소플입니다.

아래와 같이 한 번 해보시겠어요?

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((a) => <li>{a}</li>);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ul>{listItems}</ul>);

 

감사합니다.

한영훈님의 프로필 이미지
한영훈
질문자

답변 감사합니다. 잘 되었습니다. 다른 예제들도 리액트로 구현하고 싶은데, 그러면 강의에서 예제로 보여주는 명령어들을 그대로 index.js에 입력한 후에 root.render를 통해 하면 되는 걸까요?


Inje Lee (소플)님의 프로필 이미지
Inje Lee (소플)
지식공유자

네, 동일하게 해보시면 됩니다.

다만 실습 부분을 제외한 이론 강의에 나오는 예제 코드들은,

실제로는 작동하지 않고 설명을 위해서만 작성된 코드들도 포함되어 있습니다.

그래서 시도는 해보셔도 되지만 아마 작동하지 않을 수 있기 때문에 이 점을 참고해주시기 바랍니다!

한영훈님의 프로필 이미지
한영훈
질문자

넵 갑사합니다

 

한영훈님의 프로필 이미지
한영훈

작성한 질문수

질문하기