리액트는 기본적으로 Javascript 사용 업데이트 된 사항? 자동으로 UI 업데이트 코드 재활용을 많이 함 (JSX 문법: html +Javascript) repl.it.com ⇒ 온라인 코딩툴 폴더 구조: src 폴더 내 App.jsx: 웹사이트에 보일 내용 main.jsx: index.html 파일과 App.jsx를 연결해줌 기존 html 과 차이? → div 태그 안에 class 대신 className 으로 사용! state ① state 가 바뀌면 UI가 자동으로 업데이트 됨 import React**,{useState}** from 'react'; import './App.css'; function App() { let count = 0 **const [count2, setCount2] = ..
리액트 에서는 html 의 div 가 너무 많아지면 코드의 가독성이 떨어지기 때문에 이를 위해 component 로 변경해주는 작업을 한다. [정리] 1. 컴포넌트 만드는 방법 ① function 만들고 ② return() 안에 html 담기 ③ or 쓰기 1. 컴포넌트 만드는 방법 ① function 만들기 - function 은 다른 function 바깥에 만들고, 영어 대문자로 시작해야 한다. ② return() 안에 html 만들기 - 기존의 html 문법에 따라 return 안에 html 코드를 작성한다. ③ or 쓰기 - 만들어준 컴포넌트를 사용하고자 하는 곳에 작성한다. 2. 완성된 코드 App.js /* eslint-disable */ import React, { useState } fro..
1. 태그에 class를 넣어주고 싶으면? => className 사용! 2. 리액트에서 데이터 바인딩 쉽게 하는 방법 - 데이터 바인딩: 데이터를 HTML 에 꽂아넣는 것 src, id, href 등의 속성에도 { 변수명, 함수 등 } 3. JSX 에서 style 속성 집어 넣을 때 style = { object 자료형으로 만든 스타일 } - 속성명은 camelCase 작명습관에 따라 속성명을 작성하자 ex) JS에서는 font-size -> JSX 에서는 fontSize
