컴포넌트 만드는 법function 만들고다른 function 바깥에 만들기함수 이름은 영어 대문자로 시작return() 안에 html 담기 쓰기function Modal() { return ( 제목 날짜 상세내용 );}(참고1)return () 안에 html 병렬기입 하려면function Modal() { return ( 제목 날짜 상세내용 );} 사용가능(참고2)둘 다 사용 가능어떤 걸 컴포넌트로 만들면 좋은가반복적인 html 축약할 때큰 페이지들자주 변경되는 것들컴포넌트의 단점state 가져다 쓸 때 문제 생김⇒ A 함수에 있던 변수는 B 함수에서 맘대로 가져다 쓸 수 ..

숙제 답(참고) array / object 다룰 때 원본은 보존하는 게 좋음/* eslint-disable */import { useState } from 'react';import './App.css'function App() { let post = '강남 우동 맛집'; **let [글제목, 글제목변경] = useState([ '남자 코트 추천', '강남 우동 맛집', '파이썬독학' ]);** let [따봉, 따봉변경] = useState(0); return ( ReactBlog **{ let copy = [...글제목]; copy[0] = '여자 코트 추천'; 글제목변경(copy..

return()안에는병렬로 태그 2개이 이상 기입 금지자료 잠깐 저장할 땐변수를 사용해도 되지만 state 써도 된다~state 만드는 법import {useState}useState(보관할 자료)let [작명, 작명]let [a, b] = useState('남자 코트 추천');a : state에 보관했던 자료 나옴b : state 변경 도와주는 함수(참고) Destructuring 문법let num = [1,2];// 배열 안에 있던 걸 변수로 빼고 싶다!let [a, c] = [1, 2];// let a = num[0];// let c = num[1];변수 문법이 있는데 왜 굳이 state 써야 함?변수랑 state는 차이점이 1개 있다.일반 변수 : 갑자기 변경되면 html에 자동으로 반영 안 됨f..

상단 메뉴 만들어보기import './App.css'function App() { return ( 블로그임 );}export default App.App { text-align:center;}.black-nav { display: flex; background: black; width: 100%; color: white; padding-left: 20px;}JSX 문법 1.class 넣을 땐 className 블로그임JSX 문법 2.변수넣을 땐 {중괄호}⇒ 데이터바인딩{ post }JSX 문법 3.style 넣을 땐 style={ {스타일명 : ‘값’} }블로그임참고에러메시지는 터미널/브라우저에서 확인

리액트 프로젝트를 실행하기 전 node.js + 에디터로 vscode 설치.npx create-react-app blog→ 요즘은 vite를 쓰는게 대세! 라고 한다.npm create vite@latest위 명령어를 대신 입력해서 리액트 프로젝트를 세팅~만든 프로젝트 폴더를 열면src폴더 안에 있는 App.js 이게 메인페이지 → 여기서 코드를 짜면 된다~node_modules 폴더 : 라이브러리 코드 보관함public 폴더 : static 파일 모아놓는 곳src 폴더 : 코드짜는 곳package.json : 프로젝트 정보내 사이트를 브라우저로 미리보기 띄우기에디터 상단 메뉴 중에 Terminal - New Terminal 실행터미널에npm run dev입력해당 주소로 접속하면이러한 화면이 뜬다.