본문 바로가기

React21

[React] 1. JSX 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 본격적으로 React를 이용해 웹페이지를 만들어보자! 1. JSX 웹사이트의 뼈대를 구축할 때 html과 css를 이용하여 구성한다. React라고 해서 다를 것은 없다! 똑같이 html과 css를 이용한다. 하지만 다른 점은 저번 포스트에서 다뤘던 것 처럼 js파일에 코드를 작성한다. 이것이 바로 JSX이다. JSX(JavaScript XML)는 JS에 XML을 추가한 문법이다. JSX에 XML 코드를 입력하면 브라우저에서 실행하기 전 바벨을 통해 일반 js형태의 코드로 변환된다. App.js import './App.css'; function App() { return ( ..... 2023. 5. 7.

[React] 0. React를 사용하는 이유 & 초기 세팅 현재 웹 프레임워크 중 가장 많이 사용하고 시장에서 원하는 React에 대해서 알아보자! 1. React를 사용하는 이유 장점 1_ 리액트는 SPA(Single Page Application)를 만들 수 있다. 즉, 모바일 어플처럼 새로고침을 하지 않고 페이지 전환 등이 부드럽게 구현이 되도록 제작할 수 있다. 물론 Vanilla JS로도 SPA를 구현할 수 있지만 React를 이용하는 쪽이 훨씬 간편하게 만들 수 있다. 장점 2_ Html의 재사용이 편리해진다. html을 함수, array, object 등에 담아서 활용할 수 있기 때문에 재사용이 편리하다. 장점 3_React Native를 이용해 모바일 어플 구현도 가능하다. 이러한 장점들 뿐아니라 시장이 가장 요구하는 기술이기 때문에 웹 개발자로서.. 2023. 5. 5.

[Electron] 1. Electron에 React 탑재하기! 2023.05.01 - [🌌 | WEB DEV/Electron] - [Electron] 0. Electron이란? & 초기설정 Electron은 JS기반 프레임워크이기 때문에 React 역시 함께 활용할 수 있다. 저번 포스트에서 진행한 프로젝트에 React를 탑재해보자! 1. React 패키지 추가하기 npm install --save react react-dom 위 명령어를 통해 설치가 완료된 경우 package.json에는 이처럼 추가가 된다. "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", } 2. 소스파일 만들기 main_react라는 이름으로 js파일을 생성하였다. (이름은 임의 작성) main_react.js import Reac.. 2023. 5. 2.

이전 1 2 3 다음

티스토리툴바