React
-
JSX로 HTML짜기React 2022. 3. 3. 13:19
리액트도 html과 똑같이 div박스를 이용해서 코드를 짜주면 된다. 하지만 리액트도 js이기 때문에 class라는 예약어를 쓸 수 없어서 html에서 클래스를 줄 때 여기서 className을 이용한다. 이런 식으로, 태그에 class를 부여한다. 그 다음, 리액트의 가장 큰 장점은 데이터 바인딩이 쉽다는 것이다. 예를 들면, var data = "안녕하세요" {data} 이런 식으로, data라는 변수명을 html에 넣으려면 { 변수명 } 이렇게 사용해주면 된다. 그리고 이 자리엔 함수명도 가능하다. { 함수이름() } 이렇게 넣으면 된다. 그리고 이미지등을 가져오려면 상단에 import를 이용해서 import 이름 from '주소'; 이런 식으로, 이미지를 가져올 때 역시 { } 문법을 사용해서 가..
-
React란?React 2022. 3. 3. 01:35
Web app 을 만들기 위해 react를 사용한다. 웹앱은 다른페이지로 넘어가거나 포스팅을 발행할 때 새로고침 되지 않고 동작하는 것을 말한다. 그래서 모바일앱으로 발행이 쉽고, 앱처럼 UX가 뛰어나다. 리액트 프로젝트 생성은 해당 폴더에 터미널을 열고, npx create-react-app 프로젝트명 을 입력해주면 된다. 그런 후, 프로젝트명의 하위폴더를 다시 에디터에 열어서 거기다가 코딩해주면 된다. 그리고 src폴더의 App.js가 메인페이지가 된다. 그러곤, 미리보기를 하려면 프로젝트명을 확인 후(프로젝트명의 폴더로), npm start를 입력하면 된다. App.js 가 메인페이지가 되는 원리는 App.js 를 index.js로 index.html에 다 박아넣어서 되는 원리이다. 그리고, pub..