🤔React를 왜 사용 하는가?

1. SPA(Single Page Application) 만들 때 사용된다.
   • 새로고침없이 부드럽게 동작 가능한 페이지
   • vanilla JS로 쓰기에는 소스코드가 너무 길어짐
   • 다른 라이브러리에 비해 React의 사용자가 많고, 오래됨
2. html 재사용 편리
3. 같은 문법으로 앱개발 가능(React Native)
4. 취업할 때 못하면 뽑지를 않는다…..😢

---

😤React프로젝트 만들기

Power Shell창에서 npx create-react-app 프로젝트이름

• npx는 JS를 스크립트로써 실행시켜주는 환경
• create-react-app은 react를 자동으로 만들어주는 스크립트

blog 폴더 파헤치기❗

• node_modules 폴더 : 라이브러리 코드 보관함
• public 폴더 : static 파일 모아 놓는 곳
• src 폴더 : 코드 짜는 곳

• 웹페이지는 html코드로 이루어져 있는데, index.js가 js파일을 웹페이지로 변경해준다.

---

🤗레이아웃 만들 때 쓰는 JSX 문법 3개

jsx

• .js파일에서 쓰는 html 대신 쉽게 사용할 수 있는 대체품(부가기능) jsx 미사용 시 React에서
  를 만드려면 React.createElement('div', null, 'Hello World') ← 매우 복잡함
  

className

• html에서는
  으로 쓰지만, React에서는 className으로 써야 함.
• js문법인 class와 겹침

{} 문법

html

let post = ‘강남 우동 맛집’;
document.querySelector('h4).innerHTML = post;
.
.
.
<h4></h4>

JSX

let post = ‘강남 우동 맛집’;
<h4>{ post } </h4>

style

<h4 style={{color:'red',  fontSize: '16px'}}> 블로그입니다 </h4>

❗style 안에는 object만 들어 올 수 있음❗

---

😊변수와 state

return()

• return() 안에 소스를 작성해야 함.
• 하나의 태그로 끝나야 함.

변수

• 자료를 잠깐 저장할 때 사용 됨.

State

import { useState } from 'react';

funtion App() {
	let [a,b] = useState('남자 코트 추천');

let [a, b]

a: state에 보관했던 자료

b: 자료를 변경하는데 도움을 주는 state 변경 도와주는 함수

• useSate를 써도 Array 형태로 남는다❗

Array

let num = [1, 2];

let a = num[0];
let c = num[1];

Destructuring 문법

let num = [1, 2];

let [a, c] = [1, 2];

🤔그래서 왜 state를 써야 하는 거지?

• 일반 변수는 갑자기 변경되면 html에서 자동으로 변경이 안됨. → state는 자동 재랜더링 이 됨!
• 화면에 보여지는 자주 변경되는 내용에 대해서 사용하면 편리함.
• 많이 사용하면 랜더링을 자주 하면서 느려진다.

---

😊버튼 기능 개발 & 리액트 state 변경

let [글제목, b] = useState(["남자 코트 추천", "강남 우동맛집", "파이썬독학"]);

return (
    <div className="App">
      <div className="black-nav">
        <h4> {logo} </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>
  );

✍️warring 메시지 없애는 법

/* eslint-disable */

• 개인적으로는 warring 보여주는 게 편합니다…

onClick ={}

• {}안에는 함수만 들어올 수 있음. function 혹은 () ⇒ {}
  

State변경 하는 법

• 등호를 사용해서는 html상에서 변경이 적용이 안된다. 따봉 = 따봉 + 1 ← 변경 안됨.
  

let [따봉, 따봉변경] = useState(0);

return (
.
.
.
{글제목[0]} <span onClick={()=>{따봉변경(따봉+1)}}>👍</span>
.
.
.
)

• 따봉변경은 state 변경용 함수. ← state 변경 ← 재랜더링이 제대로 된다.