리액트는 기본적으로 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..
[state 정리] 1. 변수 대신 쓰는 데이터 저장 공간 2. useState() 를 이용해 만들어야 함 3. 문자, 숫자, array, object 다 저장 가능 - 데이터 넣는 방법: 1) 변수에 넣거나 2) state 넣거나 [state 사용 방법] state 사용하기 위해서는 { useState } 상단에 첨부! import React, { useState } from 'react'; cf) ES6 destructuring 문법 - array, object 에 있던 자료를 변수에 쉽게 담고 싶을 때 사용 ex) 10,100을 a,b에 넣어주세요! var [a,b] = [10, 100] let [a,b] = useState('남자 코트 추천'); => [state데이터, state 데이터 변경 함..
1. 태그에 class를 넣어주고 싶으면? => className 사용! 2. 리액트에서 데이터 바인딩 쉽게 하는 방법 - 데이터 바인딩: 데이터를 HTML 에 꽂아넣는 것 src, id, href 등의 속성에도 { 변수명, 함수 등 } 3. JSX 에서 style 속성 집어 넣을 때 style = { object 자료형으로 만든 스타일 } - 속성명은 camelCase 작명습관에 따라 속성명을 작성하자 ex) JS에서는 font-size -> JSX 에서는 fontSize
vscode를 이용하여 react 프로젝트를 해보려고 하는데 nodejs 설치 후 아래와 같이 ObjectNotFound 오류가 발생했음 vscode 에서 실행하려는 터미널이 powershell 이여서 생기는 오류라고 해서 이를 Command Prompt 로 변경해서 해봤음에도 동일하게 오류가 발생 했다. [해결방법] 1. 작업용 폴더 (여기에서는 react-class) 생성 2. 폴더 클릭 후 shift + 우클릭 > '여기에 PowerShell 창 열기' zmfflr 3. 터미널에 npx create-react-app blog 입력 4. vscode 에 해당 폴더로 프로젝트 오픈
