[React 기초] React 기본 포맷

거의 1년만에 글을 쓰는 입장입니다. 개인적으로도 바쁘기도 했지만 바쁜것 보다는 심적 여유가 없었다는게 더 맞는 말인듯 합니다. 좀 더 정확하게 이야기 하자면 지금 내가 무엇을 하고 있는지 몰랐기에 블로그에 글을 남기는 것이 의미가 없었을 수도 있습니다. 정말 다 늦은 나이에 코드를 개인적으로 공부하는게 어떤 의미가 있는지 이게 도움이 되는지에 대한 결론을 내지 않고서는 과거 학생시절처럼 남들이 만들어 놓은 내역을 베끼는 수준에서 더 나아지지는 않기 때문에 쉽게 내 블로그에 접속을 할 수가 없었네요. 

 

어느 순간 하나의 취미로 배우는 기쁨에서 만족하자라는 자기 위안이 더 강하게 들어 다시 정리해 보고자 합니다. 여러 프로그래밍 언어가 있지만 React를 건드렸다가 멈춘 관계로 다시한번 정리를 해 나가 보고자 합니다. 

 

React가 왜 편하게 사용되고 어디 어디에 널리 사용되는 것은 워낙 웹상이나 유튜브에서 설명이 잘 나오니 다시 정리를 하지는 않겠지만 최소한 실질적으로 React를 사용할 수 있게 초보자로서 배워보고 충분히 따라할 수 있는 쉬운 매뉴얼을 만들어 보고자 하는게 지금부터의 목표입니다. 

 

1. React 기본 개요

 

React를 통해서 하나의 웹팩으로 만들어 흔히 볼 수 있는 스마트폰에서 '앱'으로 활용할 수 있습니다. 그 과정을 자동으로 만들어 주는 Application을 이용하면 되는데 그 과정만 공부하면 원리에 대한 이해도가 낮기 때문에 간단하게 원리를 알고 넘어가는게 좋습니다. 

 

또한 궁금한 점이 있으면 React 공식 페이지를 참조하면서 웹상에 보여지는 무료강의를 공부하면 자신의 것으로 만들어 갈 수 있을 것으로 보여집니다.

 

공식페이지는 다음과 같습니다.

 

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (reactjs.org)

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

공식페이지에서 React의 정의를 '사용자 인터페이스'를 만들기 위한 JavaScript 라이브러리라고 정의하고 있네요. 즉, 간단히 말하면 JavaScript의 범주라고 보면 되며 이는 웹상에 보여지게 하기 위한 HTML 이 필요하다고 보면 됩니다. 

 

2. React 기본 포맷

 

결과물은 결국 웹상에 표현되기 때문에 구조의 형태는 HTML입니다. 다음과 같은 기본 구조를 가지고 있습니다. 

 

 

 

위 코드를 보면 기본은 HTML이라는 것을 알수 있습니다. 이런 이야기는 브라우저에 표현하기 위해 HTML 구문을 따르고 화면을 꾸미기 위해 CSS가 필요하며 상호간 이벤트 작용을 위해서 JavaScript가 필요하다는 것을 알 수 있습니다. 

 

상기 그림을 번호대로 설명하자면 

 

①번의 script src는 React 프로그램을 개발할 때 사용되는 링크이며 개발시 React의 프로그램이 동작할 수 있는 라이브러리와 연결되어 있습니다. 참고로 그 밑에 주석처리되어 있는 script src는 개발완료 후 배포시 사용될 소스입니다. 

2023년부터 React의 버전이 18버전이라는 것을 알 수 있습니다. (React@18)

 

ⓩ번은 JavaScript에서 좀 더 엄격한 문법인 JSX문법을 사용하기 위하여 Babel 기능을 가져와야 되는데 해당 기능에 대한 연결을 나타내는 겁니다. 

 

⑤번의 콤포넌트가 랜더링되면서 ③번의 <div>태그로 연결되면서 브라우저상 렌더링 내용이 보이게 됩니다. 

 

이를 위해 ④번에서 프로그램이 코딩되는 영역입니다.  

물론 상기 구조를 이해하여야 원리를 이해할 수 있고 원리가 이해되어야 React뿐 아니라 많은 사람들이 사용하는 웹팩도 사용이 가능해 집니다. 

 

한가지 상기 구조에서 확실한 것은 자바스크립트(JS)이던 React이던 웹에서 구현되어야 하기때문에 기본 구조는 HTML입니다.