-
React 기본 : React Component에 대한 개념 (React 기본구조)컴퓨터 알아가기/React 2021. 6. 24. 19:30728x90반응형
지난시간까지 React 기본에 대해 무조건 따라헤보다가 Material UI 를 이용하여 테이블 구성에서 에러에 빠졌습니다. 좀 더 기본을 공부해야할 필요성을 느꼈습니다. 여기저기 무료강좌를 찾아보다가 일부 무료강좌를 하고계신 'ZeroCho TV'를 통해 좀 더 기본 개념을 잡아보도록 하겠습니다.
특히, 저처럼 React와 관련되어 아무 개념이 없는 사람에게는 또 한번 놀랄일이 지금껏 React 환경을 만들기 위해 create-react-app을 사용하였는데 처음부터 HTML을 이용하여 React 구성을 마치는 과정이었습니다.
▒ React 기본 구조
React는 프로그래밍 언어라기 보다는 React 홈페이지에 나와 있는 대로 '사용자 인터페이스를 만들기 위한 JavaScript 라이브러리'인게 조금 이해가 갑니다. 즉, 웹(Web)에서 구현되기 위한 하나의 작업 툴이나 작업 프레임으로 이해를 해야 하는군요.
다음 순서를 가능한 직접 타이핑을 통해서 익숙하게 우선 외우는 게 좋을 듯 합니다. 사실 create-react-app을 통한 기본 구성요소를 간단하게 직접 만들어 보는 과정입니다.
① HTML 기본 구조에서 시작
결국 React는 웹에서 구현이 목적이므로 index.html에서 다음과 같이 기본구조로 시작을 합니다.
VS Code에서 시작해 보겠습니다.
보통 개발자들은 <script> 태그에서 React 프로그래밍을 한다고 합니다. 하지만 이제까지 배웠던 id="root"를 <div>태그에 반영하고 시작하겠습니다.
② React 및 React-Dom 가져오기
Create-react-app에서는 React와 React-Dom을 import 하였습니다만, HTML 문서이기 때문에 링크를 걸어서 가져오도록 하겠습니다. React 홈페이지에 가면 CDN (Content Delivery Network)주소가 있습니다. 말 그대로 네트워크를 통해 React를 가져오고 렌더링이 가능한 React-Dom도 같이 가져옵니다.
문서 > CDN 링크로 갑니다.
다음 CDN 주소를 복사하여 index.html의 <head>태그사이에 붙혀 넣습니다.
③ <body> 태그내 class 컴포넌트 정의 및 렌더링
<script>
→ 변수 선언 및 HTML에 만들겠다라는 표시 React.createElement 사용
→ React.Component로부터 계승받아 LikeButton 이라는 class Component 정의
contructor(props)와 super(props) 타이핑 : 이 부분은 당분간 외워야 함
→ render( ) 함수 정의
</script>
<script>
→ ReactDOM.render( ) 함수를 통하여 root로 내용 전송
</script>
상기 내역을 코드로 나타내면 다음과 같습니다.
4 우선 기본구조는 지금까지 공부해 온 모습과 크게 다른바 없습니다. 단지 index.html 문서에 직접 코딩을 하여 진행한 내역으로 class형 Component의 기본 구조라고 이해하면 된다고 합니다. 간단한 모습이기때문에 이해가 되기전까지는 우선 머리속에 암기를 할 필요가 있겠습니다.
위 코드의 핵심은 '좋아요' 버튼을 React 구조로 나타낸 겁니다. 브라우저로 한번 보겠습니다.
역시 지난번 우리가 가장 눈여겨 보았던 HTML상에 id="root"에 전부 전송되어 웹에 나타나는 원리는 같다고 볼 수 있습니다. 다음시간에 HTML속성과는 어떤 관계가 있는지 계속 공부해 보도록 하겠습니다.
반응형'컴퓨터 알아가기 > React' 카테고리의 다른 글
React 기본 : React State 개념, JSX문법, Babel (0) 2021.06.29 React 기본 : React Component에 대한 개념 (HTML속성과의 관계 및 State)과 Chrome React 확장 (0) 2021.06.28 React 기본 : 클래스형 Component 정의하는 기본 작업순서 정리 (0) 2021.06.23 React 기본 : 고객 Component 구조화 (계층적으로 만들기) (2) 2021.06.22 React 기본 : 고객 Component 를 Props 를 이용하여 구조화하는 개념잡기 (0) 2021.06.21