1. node j.s (LTS)로 설치.
2. vscode 설치
3. 디렉토리 만들고(원하는 이름) vscode에서ㅏ 오픈
4. npx create-react-app blog(원하는 이름)
5. 프로젝트 명이 왼쪽 위에 제대로 찍혀있나 확인하기.
app.js에서 작업시작(retrun <div></div> 태그 안에
6. 뉴 터미널 npm start 명령어 -- > 미리보기 나옴
프로젝트 설명
node_modules 폴더 : 라이브러리 코드 보관함 (일반적으로 냅두면 됨)
public 폴더 : static 파일 모아놓는 곳
src 폴더(제일 중요, 소스코드 보관함) app.js 메인 페이지 . js코드 안에 html을 짜도 잘 작동한다!? -->
app.js에 있는 코드를 index.js가 index.html에 집어넣어준다.
package.json -- > 프로젝트 정보들을 보관해 놓는곳
npm start 해놓고 미리보기 띄워놓고 작업하기.
app.js 복잡하니까 div만 남겨 놓고 다 지우기 <div></div>
app.js에서 html이나 페이지가 잘 작동한다 ? JSX --> javascript안에서 html을 쉽게 쓸수 있게만드는 언어?부가기능?
app.css 스타일 손 볼 수 있음.
app.js
<div class='black-nav'>
<h4>블로그임</h4>
</div>
<div className='black-nav'>
app.css
.black-nav {
display: flex;
background: black;
width: 100%;
color: white;
padding-left: 20px;
}
--> jsx문법에서는 .js파일에서
1)class 가 아니라 className=""로 해야 인식가능
--> 외부파일 css를 읽고 싶으면 import를 잘 해야한다 .
jsx문법2
변수 넣을떈 중괄호{} --> id 변수명,src,className 모든 곳에서 웬만하면 다 사용가능.
(데이터 바인딩)
function App() {
let post = "강남우동맛집";
return (
<div className='App'>
<div className='black-nav'>
<h4>블로그임</h4>
</div>
<h4>{post}</h4>
</div>
);
}
jsx문법3
style 넣을 땐 style={{스타일명 : '값'}}
<h4 style={{ color: "red" }}>블로그임</h4>
import logo from "./logo.svg";
import "./App.css";
function App() {
let post = "강남우동맛집";
asdadasda;
return (
<div className='App'>
<div className='black-nav'>
<h4 style={{ color: "red", fontSize: "16px" }}>블로그임</h4>
</div>
<h4>{post}</h4>
</div>
);
}
export default App;
틀린 코드 작성하면
이렇게 보여주기 화면에서 컴파일 에러뜸 .
이렇게 안보이면 페이지 검사하기에 나와있음. (console메뉴)
import logo from "./logo.svg";
import "./App.css";
function App() {
let post = "강남우동맛집";
asdadasda;
return (
<div className='App'>
<div className='black-nav'>
<h4 style={{ color: "red", fontSize: "16px" }}>블로그임</h4>
</div>
<h4>{post}</h4>
</div>
);
}
export default App;
import logo from "./logo.svg";
import "./App.css";
function App() {
let post = "강남우동맛집";
return (
<div className='App'>
<div className='black-nav'>
<h4 style={{ color: "red", fontSize: "16px" }}>블로그임</h4>
</div>
<div className='list'>
<h4>글제목</h4>
<p>2월 17일 발행</p>
</div>
<h4>{post}</h4>
</div>
);
}
export default App;
div {
box-sizing: border-box;
}
.list {
padding-left: 20px;
text-align: left;
border-bottom: 1px solid grey;
}
///////////////////////////////
자료 잠깐 저장 할 때 let ,const , state 사용 가능
let [a, b] = useState("남자 코트 추천");
useState(보관할 자료) , let[작명,작명]
a= state에 보관했던 자료 나옴 {a}
b= state변경 도와주는 함수
변수 문법이 있는데 왜 state 써야함???? --> 변동 시 자동으로 html에 반영되게 만들고 싶으면 html 쓰셈
let은 변수 변경감지를 못해서 html에 자동 반영이 안됨.
state는 변경감지를 해서 html에 자동반영이 됨 (재 랜더링)
빡대가리식 정리 -> 자주 변경될거 같은 html 부분은 state로 만들기.
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";
function App() {
let post = "강남우동맛집";
let [글제목, b] = useState("여자 코트 추천");
let [logo, setLogo] = useState("ReactBlog");
return (
<div className='App'>
<div className='black-nav'>
<h4>{logo}</h4>
</div>
<div className='list'>
<h4>{글제목}</h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";
function App() {
let post = "강남우동맛집";
let [글제목, b] = useState(["여자 코트 추천", "강남 우동맛집", "파이썬독학"]);
return (
<div className='App'>
<div className='black-nav'>
<h4>ReactBlog</h4>
</div>
<div className='list'>
<h4>{글제목[0]}</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[1]}</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;
배열 사용법 .
터미널에 가끔 뜨는 warning은 무시가능.
error 에러라 중요 .
warning 안뜨게 하는법
/* eslint-disable */
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";
function App() {
let post = "강남우동맛집";
let [글제목, b] = useState(["여자 코트 추천", "강남 우동맛집", "파이썬독학"]);
return (
<div className='App'>
<div className='black-nav'>
<h4>ReactBlog</h4>
</div>
<div className='list'>
<h4>
{글제목[0]} <span>좋아요</span> 0{" "}
</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[1]}</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;
크롬 우클릭 -- > 그림 이모티콘 사용 가능.
onClick= {}안에는 함수 이름을 넣어야함
/* eslint-disable */
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";
function App() {
let post = "강남우동맛집";
let [글제목, b] = useState(["여자 코트 추천", "강남 우동맛집", "파이썬독학"]);
let [따봉] = useState(0);
function 함수() {
console.log(1);
}
return (
<div className='App'>
<div className='black-nav'>
<h4>ReactBlog</h4>
</div>
<div className='list'>
<h4>
{글제목[0]} <span onClick={함수}>👍</span> {따봉}
</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[1]}</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;
or Onclick={ () => {console.log(1) } }
state 변경하는 법 ( 등호로 변경금지) ex) 따봉 = 따봉+1 금지 .
state 변경하는 법 -- > state변경함수(새로운 state)
/* eslint-disable */
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";
function App() {
let post = "강남우동맛집";
let [글제목, b] = useState(["여자 코트 추천", "강남 우동맛집", "파이썬독학"]);
let [따봉, 따봉변경] = useState(0);
function 함수() {
console.log(1);
}
return (
<div className='App'>
<div className='black-nav'>
<h4>ReactBlog</h4>
</div>
<div className='list'>
<h4>
{글제목[0]}{" "}
<span
onClick={() => {
따봉변경(따봉 + 1);
}}
>
👍
</span>{" "}
{따봉}
</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[1]}</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;
/////////
array/ object 특징
/* eslint-disable */
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";
function App() {
let post = "강남우동맛집";
let [글제목, 글제목변경] = useState([
"남자 코트 추천",
"강남 우동맛집",
"파이썬독학",
]);
let [따봉, 따봉변경] = useState(0);
function 함수() {
console.log(1);
}
return (
<div className='App'>
<div className='black-nav'>
<h4>ReactBlog</h4>
</div>
<button
onClick={() => {
let copy = [...글제목];
copy[0] = "여자코트추천";
글제목변경(copy);
}}
>
글 수정
</button>
<div className='list'>
<h4>
{글제목[0]}{" "}
<span
onClick={() => {
따봉변경(따봉 + 1);
}}
>
👍
</span>{" "}
{따봉}
</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[1]}</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;
/* eslint-disable */
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";
function App() {
let post = "강남우동맛집";
let [글제목, 글제목변경] = useState([
"남자 코트 추천",
"강남 우동맛집",
"파이썬독학",
]);
let [따봉, 따봉변경] = useState(0);
function 함수() {
console.log(1);
}
return (
<div className='App'>
<div className='black-nav'>
<h4>ReactBlog</h4>
</div>
<button
onClick={() => {
let copy = [...글제목];
copy[0] = "여자코트추천";
글제목변경(copy);
}}
>
글 수정
</button>
<div className='list'>
<h4>
{글제목[0]}{" "}
<span
onClick={() => {
따봉변경(따봉 + 1);
}}
>
👍
</span>{" "}
{따봉}
</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[1]}</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
</div>
);
}
export default App;
<div className='modal'>
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
컴포넌트화 시키는 방법
1. function 만들고 -- 다른 함수 바깥에 만들기 ,대문자첫글자
2. retunr() 안에 html 담기
3. <함수명></함수명> 쓰기
어떤걸 컴포넌트로 만들면 좋은가?
1. 반복적인 html 축약할 때
2. 큰 페이지들
3. 자주 변경되는 것들
컴포넌트의 단점 : state 가져다 쓸 떄 문제생김 -- > A함수에 있던 변수는 B함수에서 맘대로 가져다 쓸 수 없음.
/* eslint-disable */
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";
function App() {
let post = "강남우동맛집";
let [글제목, 글제목변경] = useState([
"남자 코트 추천",
"강남 우동맛집",
"파이썬독학",
]);
let [따봉, 따봉변경] = useState(0);
function 함수() {
console.log(1);
}
return (
<div className='App'>
<div className='black-nav'>
<h4>ReactBlog</h4>
</div>
<button
onClick={() => {
let copy = [...글제목];
copy[0] = "여자코트추천";
글제목변경(copy);
}}
>
글 수정
</button>
<div className='list'>
<h4>
{글제목[0]}{" "}
<span
onClick={() => {
따봉변경(따봉 + 1);
}}
>
👍
</span>{" "}
{따봉}
</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[1]}</h4>
<p>2월 17일 발행</p>
</div>
<div className='list'>
<h4>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
<Modal />
</div>
);
}
function Modal() {
return (
<div className='modal'>
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
);
}
export default App;