React - component 만들기

이전에 배운 걸 토대로 h1과 ul을 화면에 출력시키려면 위의 코드처럼 작성하면 됐다.

 

React를 들어보면서 component라는 말을 정말 많이 들어봤는데 드디어 오늘 처음 배웠다.

뭔가 새로운 걸 알았다는 설렘과 이렇게 편한데 내가 지금까지 한 건 뭐지...라는 회의감이 온다.

---

제목에 해당하는 h1태그를 Heading.jsx라는 파일로 따로 만들고

list에 해당하는 부분들을 전부 끌고 와서 List.jsx라는 파일로 따로 만들었다.

 

jsx 파일 형식은 React에서 작동하는 자바스크립트이므로 꼭 앞에 React를 import 해주어야 한다.

 

그리고 각각의 파일 맨 마지막에는 Heading과 List를 default로 export 할 수 있도록 코드를 작성했다.

 

얘네를 이제 App.jsx 파일로 가져온다.

Heading, List 파일에서 각각 Heading, List라는 이름으로 불러온다.

 

그리고 div 태그 안에 HTML 태그처럼 <Heading/>, <List/>를 입력하면 끝이다.

 

얘네를 이제 App으로 export 하고 index.js에서 <App />으로 render 한다.

화면에 이렇게 h1과 list들이 쫙 출력된다.

이건 강의에서 알려준 파일 정리 형식인데 실무에서 components라는 폴더 안에 저렇게 부분별로 저장해서 파일을 분류한다고 하더라.

---

뭔가 되게 신선한 충격이었다.

 

기존의 html, css, javascript로 똑같은 list를 만들려면 ul을 감싸고 있는 div나 wrapper 찾아서 드래그해서 복붙 하거나

javascript에서 반복문 도는 형식으로 createElement를 사용해서 list를 만드는 팩토리 함수를 만들었었는데

그냥 이렇게 component를 만들고 불러오고 추가적으로 필요하면 태그 하나만 입력해주면 된다니...

 

말 그래도 '프레임워크'라는 도구가 어떤 것인지 어떤 목적으로 사용하는지 여실히 느끼게 되었다.