- 리액트는 자바스크립트와 개발하는 방법이 다릅니다.
- 하지만 자바스크립트 문법을 거의 다 사용합니다.
1. HTML과 비슷하게 생겼지만 다른 JSX
- 화면에서 보이는 부분입니다.
- App 함수의 return 쪽을 보시면 HTML이랑 비슷하게 생겼습니다.
- 이 문법은 HTML 문법은 아니고, JSX라는 문법입니다.
JSX 문법 vs HTML 문법
-
class가 아니라 className을 씁니다.
<div className="클래스이름"></div> -
중괄호 { }로 변수를 바로 넣을 수 있습니다.*
-
HTML에는 변수를 넣을 수 없습니다.
function App() { const 변수 = 1; return (<div>{변수}</div>) }
-
-
style 넣는 법
- 변수 넣을 수 있게 { } 를 작성합니다.
- 그 안에 객체로 style을 넣습니다.
- 하이픈으로 표시됐던 건 camelCase로 변경합니다.
- ex) background-color ⇒ backgroundColor
<div style={{ backgroundColor: "red" }}>스타일넣어보기</div>
2. 자주 변경되는 변수는 state로 저장하기 - useState
- 변수 언제 썼나요?
데이터 잠시 저장할 때 또는 자주 반복될 때
- 리액트만의 고유한 변수가 있습니다.
- 바로 state라는 것입니다.
- state 사용 이유를 알기 전에 일단 사용해 볼까요?
1. App.js 맨 위에 useState import 하기
import { useState } from "react";- useState로 변수 선언하기
-
function 안에 써야 하고, return 밖에 써야 합니다.
function App() { const [변수1, 변수2] = useState("값"); return ( (생략) ) }
-
- 변수1과 변수2를 console.log로 확인해봅시다.
function App() { const [변수1, 변수2] = useState("값"); console.log({ 변수1 }); // 값이 나옴 console.log({ 변수2 }); // 함수가 나옴 return <div className="App">{변수1}</div>; } - 우리가 지금 사용할 건 변수1 입니다.
-
변수1을 JSX에 보여주겠습니다.
-
화면을 보시면 잘 보입니다. (npm start 하고 보셔야 합니다)
function App() { const [변수1, 변수2] = useState("값"); return <div className="App">{변수1}</div>; }
-
3. state의 값을 변경하는 방법 - setState
- 일반 변수를 변경하는 법과 다릅니다.
- useState에서 우측에 있는 변수(변수2)가 변수1을 변경하는 함수입니다.
변수2(변경하고 싶은 값) - div 클릭 시 값을 변경하도록 함수를 만들어봅시다.
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 써서 해결한다? 🤔
-만약 이런 화면이 있다면 어떨까요?
- 바닐라JS로 쓴다면?
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> ); } - state를 사용한다면?
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> ); } - 참고 - 값을 여러 개 반환할 때 - destructuring 문법
const [첫번째값, 두번째값] = [1, 2] const [첫번째값, 두번째함수] = [1, function() { // }]function 배열을리턴하는함수(초기값) { const 초기값변경하는함수 = (변경할값) => { // 로직 return 변경할값 } return [초기값, 초기값변경하는함수] } const [state, setState] = 배열을리턴하는함수(1) // const [state, setState] = [초기값, 초기값변경하는함수] // const [state, setState] = [1, 초기값변경하는함수]
응애