69일차 - React tutorial 1탄

연·2024년 3월 20일

[산대특] 공공데이터를 활용한 웹앱개발자 양성 과정 수업 일지

목록 보기

69/97

React

React를 왜 쓰는걸까?

웹 페이지는 이동시 특유의 깜빡거림이 있다.

모바일 앱은 이동시 부드럽고, 빠르다.(느낌을 받는다.)

모바일 앱 같은 웹을 만들 수 있다.

고품질의 웹 사이트 제작 가능, 많이 복잡한 UI를 가진 앱도 보다 깔끔하게 제작 가능하다.(UI == user interface)

모바일 앱도 제작 가능

기업입장에서는 시간절약 즉 비용절감으로 이어진다.

codepen에서 리액트 사용하기

codepen
설정 => js => JavaScript Preprocessor => none => Babel
codepen에서 react 사용하기 위한 환경설정
형제로 엘리먼트가 있으면 안된다.
같은 위상으로는 두개 쓰지말자.
소괄호로 감싸면 부모div 생략가능

초기세팅

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const App = () => {
	return <div>안녕</div>;
};

ReactDOM.render(<App/>, document.getElementById("root"));

React component화

없는 태그를 만들어서 창조 할 수 있다.
함수의 주요 목적(재활용)

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const Hi = () => {
  return <div>Hi</div>;
}
// const Hi = () => <div>Hi</div>; 한줄이라면 이렇게도 사용가능
const Hello = () => {
  return <div>Hello!</div>;
}

const App = () => {
  //JSX react 문법
  return (
    <div> 
      <Hi/> {/* Hi */}
      <Hello/> {/* Hello! */}
      <Hello/> {/* Hello! */}
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));

React 객체이용해서 style 주기

파이썬에서 map은 dictionary
자바에서는 HashMap 또는 Map
style 변수를 만들어서 줄 수도 있고 그냥 대괄호 안에 줄 수 도 있다.

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const Square = () => {
  
  return (
    <div
      style={{
        width: "200px" /*"key" : "value"*/,
        height: "200px",
        backgroundColor: "pink",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontWeigt: "bold",
        color: "white",
        marginTop: "10px"
      }}
    >
      정사각형
    </div>
  );
};

const Circle = () => {
  const style = {
        width: "200px" /*"key" : "value"*/,
        height: "200px",
        backgroundColor: "skyblue",
        borderRadius : "50%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontWeigt: "bold",
        color: "white", 
        marginTop: "10px"
      }
  
  return (
    <div
      style={style}
    >
    원
    </div>
  );
};

const App = () => {
  //JSX react 문법
  return (
    <div>
      <Square />
      <Circle />
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));

class로 style 주기

react에서는 class말고 className으로 줘야함.

css

.square {
  width: 200px /*"key" : "value"*/;
  height: 200px;
  background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
  fontweigt: bold;
  color: white;
  margin-top: 10px;
}

.circle {
  width: 200px /*"key" : "value"*/;
  height: 200px;
  background-color: skyblue;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  fontweigt: bold;
  color: white;
  margin-top: 10px;
}

js

const Square = () => {
  
  return (
    <div
      className="square"
    >
      정사각형
    </div>
  );
};

const Circle = () => {
  return (
    <div
     className="circle"
    >
    원
    </div>
  );
};

const App = () => {
  //JSX react 문법
  return (
    <div>
      <Square />
      <Circle />
    </div>
  );
};

빈태그로 div 두개사용하기

빈태그 사용전

const App = () => {
  //JSX react 문법
  return (
    <section>
      <div>1</div>
      <div>2</div>
    </section>
  );
};

빈태그 사용 후

const App = () => {
  //JSX react 문법
  return (
    <>
      <div>1</div>
      <div>2</div>
    </>
  );
};

react 잘하려면(useState)

시점의 차이를 잘 알아야한다?
일반변수라서 드로윙하고 변수의 역할이 끝났다.
상태변화를 주고싶다.
목표
- 얘랑 관련되어있는것들이 자동으로 갱신이 되었으면 좋겠다.
- 원래는 불가능한게 맞음.
- 이때부터 쓰는게 useState이다.

let AppCallCount = 0;
const App = () => {
  console.log("AppCallCount 실행 횟수 : " + AppCallCount++);
  const [num, setNum] = useState(100);
  console.log("num : " + num);
  return (
    <>
      <button
        onClick={() => {
          setNum(num + 1);
        }}
      >
        버튼
      </button>
      <div>현재 숫자 : {num}</div>
    </>
  );
};

null == 0 == false 얘네는 동급이다.
아래 코드를 보면 실행을 해도 기록없음이라고 뜬다 null==0==false이기에.

const App = () => {
  const [number, setNumber] = useState(0);
  const [recordNumber, setRecordNumber] = useState(null);
  return (
    <div>
      <div>숫자 : {number}</div>
      {recordNumber ? <div>기록된 숫자 : {recordNumber} </div> : <div>기록 없음</div>}
      <button
        onClick={() => {
          setNumber(number + 1);
        }}
      >
       증가
      </button>
      &nbsp;
      <button
        onClick={() => {
          setNumber(0);
          setRecordNumber(number);
        }}
      >
        기록
      </button>
    </div>
  );
};

그래서 != null이면 null만아니면 되니까 새로고침을 해도 기록된 숫자: 0이 뜬다.

const App = () => {
  const [number, setNumber] = useState(0);
  const [recordNumber, setRecordNumber] = useState(null);
  return (
    <div>
      <div>숫자 : {number}</div>
      {recordNumber != null ? (
        <div>
          기록된 숫자 : {recordNumber}
          <button onClick={() => setRecordNumber(null)}>삭제</button>{" "}
        </div>
      ) : (
        <div>기록 없음</div>
      )}
      <button
        onClick={() => {
          setNumber(number + 1);
        }}
      >
        증가
      </button>
      &nbsp;
      <button
        onClick={() => {
          setNumber(0);
          setRecordNumber(number);
        }}
      >
        기록
      </button>
    </div>
  );
};

react는 불변성을 지켜줘야한다.(전개구문)

const arr = [1,2,3]
const arr2 = [...arr,4] o
arr.push(4); [1,2,3,4] x/*여기서 불변성이 깨짐.*/

불변성을 지키기 위해 map 이용하기
- map : 원본 배열을 기반으로 복사본을 만든다.

const arr = [10,20,30];
const arr2 = [arr[0] + '번', arr[1] + '번', arr[2] + '번'];

const arr2 = arr.map((number) => return number + '번');

적용해보기

const App = () => {
  const [num, setNum] = useState(0);
  const [recordNums, setRecordNums] = useState([]);

  const saveRecord = () => {
    setNum(0);
    setRecordNums([...recordNums, num]);
  };

  return (
    <>
      <div>숫자 : {num}</div>
      <div>
        {recordNums.length == 0 ? (
          <span>기록 없음</span>
        ) : (
          <span>기록 : {JSON.stringify(recordNums)} </span>
        )}
      </div>
      <div>
        <button onClick={() => setNum(num + 1)}>증가</button>
        &nbsp;
        <button onClick={() => setNum(num - 1)}>감소</button>
        &nbsp;
        <button onClick={saveRecord}>기록</button>
      </div>
    </>
  );
};

react의 화면 갱신 원리

jsp같은 경우

브라우저 -> 톰캣에게 요청 -> 톰캣이 JSP를 실행 -> 결과 HTML 생성 -> 톰캣이 HTML 결과를 브라우저에 전송 -> 브라우저가 받은 HTML을 랜더링
만드는건 쉽고, 고치는건 어렵다. 기존거 버리고 새로운거 만드는게 더 편할때가 많음.

<%
int a = 10;
%>

<h1> 내 나이는 <%=a%> 살 이야.</h1>
<button> 나이 증가 </button>
--------------------------------------------------
내 나이는 10살 이야.
나이 증가

예시)
자동차 A
- 바퀴
 - 1번 => 교체
 - 2번
 - 3번
 - 4번
- 프레임

백엔드에서는 1 번 바퀴만 교체할 수 없다. 교체하려면 전부 바꿔야함.

text함수는 비워주고 다시 채우는 함수이다.
react가 나오기전 java script

console.clear();

let age = 10;
$('.age-1').text(age);
$('.age-2').text(age);
$('.age-3').text(age);

$('button').click(function(){
  age = age + 1;
  $('.age-1').text(age);
  $('.age-2').text(age);
$('.age-3').text(age);
  console.log(age);
});

누가 더 합리적인가?
- 자동차의 부품 중 하나가 마음에 안들었을 때 할 수 있는 행동
A: 기존 차를 버리고 다시 구매(구매 할 때 해당 옵션을 자신에 맞게)(기존에 하던 방식)
B: 기존 차를 수리, 부품만 교체(react 방식)
react 클라이언트 사이드 랜더링 방식
- 리액트 방식
  - 옛날방식 + 서버사이트 랜더링 방식
PHP

TODO

JSX 찾아보기
- 자바스크립트 안에다가 html 쓸 수 있음
- JSX는 XML과 유사한 구문을 사용하여 문서 개체 모델 트리를 생성할 수 있는 JavaScript 확장입니다.
- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
- 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
- 반드시 부모 요소 하나가 감싸는 형태여야 한다.
- if문(for문) 대신 삼항 연산자(조건부 연산자) 사용
- React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용 한다.
- jsx에 대한 자료출처
오후 리액트 영상 다시보기