- 리액트는 자바스크립트와 개발하는 방법이 다릅니다.
- 하지만 자바스크립트 문법을 거의 다 사용합니다.
class가 아니라 className을 씁니다.
<div className="클래스이름"></div>
중괄호 { }로 변수를 바로 넣을 수 있습니다.*
HTML에는 변수를 넣을 수 없습니다.
function App() {
const 변수 = 1;
return (<div>{변수}</div>)
}
style 넣는 법
<div style={{ backgroundColor: "red" }}>스타일넣어보기</div>
데이터 잠시 저장할 때 또는 자주 반복될 때
1. App.js 맨 위에 useState import 하기
import { useState } from "react";
function 안에 써야 하고, return 밖에 써야 합니다.
function App() {
const [변수1, 변수2] = useState("값");
return (
(생략)
)
}
function App() {
const [변수1, 변수2] = useState("값");
console.log({ 변수1 }); // 값이 나옴
console.log({ 변수2 }); // 함수가 나옴
return <div className="App">{변수1}</div>;
}
변수1을 JSX에 보여주겠습니다.
화면을 보시면 잘 보입니다. (npm start 하고 보셔야 합니다)
function App() {
const [변수1, 변수2] = useState("값");
return <div className="App">{변수1}</div>;
}
변수2(변경하고 싶은 값)
function App() {
const [변수1, 변수2] = useState("값");
return (
<div
className="App"
onClick={() => {
변수2(1);
}}
>
{변수1}
</div>
);
}
**어떻게 동작하는가
useState 선언 시 리액트 어딘가에 변수가 저장됨
function App() {
const [변수1, 변수2] = useState("값"); // 1. 리액트 state관리하는 곳에서 변수1 = "값"이라고 저장
return (
<div
className="App"
onClick={() => {
변수2(1);
}} // 2. setState로 변경 시 리액트 어딘가에 저장된 그 변수의 값이 변경됨
>
{변수1}
</div>
);
}
리액트에서 변경된 것을 인지하고 state를 가진 컴포넌트(함수)를 다시 실행 및 그림 = 결과로 변수1은 1을 출력
이해하기 힘들면 그냥 값 변경할 때 무조건 setState로 변경한다고 생각하면 됩니다.
innerHTML 써서 해결한다? 🤔
-만약 이런 화면이 있다면 어떨까요?
function App() {
let 개수 = 0;
const 가격 = 10000;
const buttons = document.querySelectorAll("button");
const 빼기버튼 = buttons[0];
const 더하기버튼 = buttons[1];
const 상품개수 = document.querySelector("span");
const 결과 = document.querySelector(".합");
const 남은개수 = document.querySelector(".남은개수");
빼기버튼.addEventListener("click", () => {
개수 = 개수 - 1;
상품개수.innerHTML = 개수;
// 개수 * 가격도 가져와서 바꿔야함
// 남은 개수도 가져와서 바꿔야함
});
// 더하기버튼도 또 해야함
return (
<div>
<div>상품 가격: {가격}원</div>
<hr></hr>
<button>-</button>
<span>상품 개수: {개수}</span>
<button>+</button>
<div>10개 사면 무료배송!</div>
<hr></hr>
<div className="합">상품 개수 * 가격: {개수 * 가격}</div>
<hr></hr>
<div className="남은개수">무료 배송까지 남은 개수: {10 - 개수}</div>
</div>
);
}
function App() {
const [개수, 개수변경] = useState(0);
const 가격 = 10000;
return (
<div>
<div>상품 가격: {가격}원</div>
<hr></hr>
<button
onClick={() => {
개수변경(개수 - 1);
}}
>
-
</button>
<span>상품 개수: {개수}</span>
<button
onClick={() => {
개수변경(개수 + 1);
}}
>
+
</button>
<div>10개 사면 무료배송!</div>
<hr></hr>
<div>상품 개수 * 가격: {개수 * 가격}</div>
<hr></hr>
<div>무료 배송까지 남은 개수: {10 - 개수}</div>
</div>
);
}
const [첫번째값, 두번째값] = [1, 2]
const [첫번째값, 두번째함수] = [1, function() { // }]
function 배열을리턴하는함수(초기값) {
const 초기값변경하는함수 = (변경할값) => {
// 로직
return 변경할값
}
return [초기값, 초기값변경하는함수]
}
const [state, setState] = 배열을리턴하는함수(1)
// const [state, setState] = [초기값, 초기값변경하는함수]
// const [state, setState] = [1, 초기값변경하는함수]