현재 근무하고 있는 회사에서는 솔루션 기반으로 퍼블리싱을 하고 있는데, 전부 바닐라JS로 작업 중이다.
카페24 솔루션 기반의 사이트라 개발단을 건드릴 일이 없었다.
끽해야 애니메이션이나 if.. for 깔짝이는 정도~... 바닐라 JS로 기능 구현은 해왔지만,
'진짜 개발자'가 되기 위해 프레임워크 공부가 필요할 것 같아 바로 공부 시작!
📌 React 설치
나중엔 다시 작업환경을 세팅하겠지만, 일단 import 해왔다!
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
React는 UI를 Interactive하게 만들어준다.
ReactDOM은 라이브러리, 또는 패키지인데 React Element를 HTML body에 넣을 수 있게 해준다.
📌 요소 추가하는 방법
ReactDOM.render(추가할 요소, 추가할 위치)
React Element를 HTML Element로 변경하여 배치해준다.
📌 JSX 사용하기
JSX는 자바스크립트의 확장 문법으로 XML과 비슷하게 생겼다.
브라우저에 리액트 코드가 실행되기 전에 Babel을 사용하여 일반 자바스크립트 형태로 변환된다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js">
이것도 import해서 사용했다. 이 방식은 속도가 느려서 나중에는 설치할 예정!
그리고 코드가 작성된 <script> 태그에도 type="text/babel"
추가해줘야 한다.
📌 출력해보기
const Container = (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(Container, root);
Title, Button 은 컴포넌트로 요소 하나하나를 잘라서 사용 가능하다.
컴포넌트의 첫글자는 꼭 대문자로 시작해야 한다. 소문자로 적으면 html 태그로 인식하기 때문 !
이처럼 JSX는 어플리케이션을 여러가지 작은 요소, 컴포넌트로 나누어 관리할 수 있게 해준다.
잘게 쪼개 만들고 합쳐주면 된다.
원래 뭐든 시작이 반이라고 했으니... 오늘을 시작으로 리액트 꾸준히 열심히 공부해보려고 한다.
아자아자 화이땡 ~
'React' 카테고리의 다른 글
[React] Create react app으로 리액트 앱 생성하기 (0) | 2023.07.18 |
---|