개발 공부 일지

리액트 개념이 나오게 된 배경기존의 자바스크립트로 화면의 UI를 바꿔주기 위해서는let a = "기존의 html 내용"a = "바꿔치기할 html 내용"document.getElementById("content").innerHTML = a이런식으로 특정 id 요소에 html을 바꿔주는 식으로 업데이트를 했었다. 이게 복잡하고 귀찮으니까값이 바뀌면 알아서 UI를 바꿔줄 수 없을까? 해서 나온 개념이 state   일반변수로 선언했을 때import React from 'react'import './App.css'function App() { let count = 0; const increase = () => { count = count+1; console.log("변수:" + count) }..

import React from 'react'function App() { //ES6 문법, function clickMe() {} 와 동일 const clickMe = () => { alert("클릭 성공") } function clickMe2() { alert("클릭 성공2") } return ( 클릭 클릭2 {alert("클릭성공3")} }>클릭3 )}export default App 첫번째 두번째 버튼에는 onClick = { 함수명 } 으로 클릭 이벤트를 주었다.상단에 함수 선언 시,const clickMe = () => {} 와 같이 ES6문법 arrow function (화살표..

jsxjs와 html 이 합쳐진 형식을 jsx 라고 한다.import { useState } from 'react'import reactLogo from './assets/react.svg'import viteLogo from '/vite.svg'import Box from './Box'import './App.css'function App() { let a = 0; return( a )}export default Appjsx 파일은 위와 같은 형식을 띤다. function App은 일반적인 js 함수 문법인데,return의 소괄호 안에는 html이 작성되어 있다. 이렇게 js와 html이 함께 쓰인 형식을 jsx 라고 한다. 그리고 return 안의 코드는 가장 바깥 영역..