안녕하세요~! 오늘도 리액트에 대해 알아보도록 하겠습니다!
리액트는 App.jsx 파일 안에서 javascript, html, css 들을 해결할 수 있는 만큼 코드가 길어질 수 밖에 없는데요
그렇다면 코드를 쉽게 관리할 수 있는 방법은 없을까요?
방법은 있습니다
바로 component를 이용하는 것입니다
필요한 부분의 파일을 만들어주어서 App.jsx 파일과 연결해주면 코드를 더욱 짧게 작성할 수 있습니다
제가 기존에 작성했던 프로젝트를 바탕으로 예시를 보여드리도록 하겠습니다
(기존의 코드들을 건들기 조금 무서워서 간단한 태그만 component를 이용해 보여드리겠습니다...!)
어떻게 하는거죠?
<div className='bar'>
<div className='barSet'>
<h1>My Todo List</h1>
<h2>React</h2>
</div>
</div>위의 코드를 하나의 태그로 만들 수 있게 지금 부터 시작해보겠습니다!
저는 titleBar.jsx 라는 파일을 src 폴더 안에 생성하였습니다
function titleBar() {}
함수 안에 return을 넣어주고 기존에 있던 <div>태그들을 넣어주었습니다
이 때 중요한 것은!
상단에 import React from "react"; 코드를 넣어주고
하단에는 App.jsx 파일로 컴포넌트를 연결해주기 위해 export default titleBar; 코드를 작성해줍니다
export는 내가 본 메인 파일에 코드를 넘겨줄 준비가 되었다 라고 생각하시면 될 것 같습니다
이제는 다시 App.jsx
네 이제는 다시 Ass.jsx 파일로 넘어가보도록 하겠습니다
여기서도 상단에 입력해줘야하는 코드가 있는데요
import TitleBar from "./titleBar"; 코드를 작성해주어야합니다
해당 코드는 titleBar 파일에 있는 TitleBar 컴포넌트를 받아오겠습니다 라는 의미로 해석할 수 있습니다
이 때 중요한 것은!!!
import 옆에오는 컴포넌트의 이름은 무조건 대문자로 시작해야한다고 합니다!
그리고 해당 컴포넌트를 기존에 <div> 태그가 있었던 자리에 <TitleBar /> 태그를 넣으시면 완성입니다!
저는 혹시 몰라서 기존 <div> 태그를 주석처리하고 넣었지만 과감하게 삭제하고 넣으셔도 괜찮습니다!
지금은 제가 쉬운 부분만 컴포넌트를 만들어서 연결해주었지만 나중에 중복되는 부분들이나 구역을 나눠서 진행하실 경우 컴포넌트가 큰 도움이 될 것 같습니다!
제가 todolist 프로젝트를 만들 때에는 컴포넌트에 대해 아무것도 모르고 일단 기능부터 구현하자고 생각해서 코드를 작성했는데 지금 보니깐 너무 길어서 관리하기가 너무 힘들 것 같더라구요...
여러분들은 저처럼 빠르게 하지 마시고 차근차근 기초를 익히신 후 조금 더 효율적으로 코드를 작성하시기를 추천드립니다!!
자 오늘은 이렇게 React인 component에 대해 velog를 포스팅 해보았는데요
다음번에는 component를 이용해서 가져온 내용에 추가적인 부분도 적을 수 있도록 하는 props에 대해 추가적으로 공부해서 꼭 포스팅을 해보겠습니다!!
그럼 오늘도 여러분 항상 화이팅이며 항상 행복하자구요~~!
