📅2024. 03. 20 69일차
React 
리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
리엑트 왜 쓸까??
웹 페이지는 이동시 특유의 깜빡거림이 있다.
모바일 앱은 이동시 부드럽고, 빠르다.
리액트는 모바일 앱 같은 웹을 만들 수 있다.
고품질의 웹 사이트 제작 가능, 많이 복잡한 UI를 가진 앱도 보다 깔끔하게 제작 가능
모바일 앱도 제작 가능일단 codepen으로 시작
React 환경 잡기 (코드펜에서) 시작코드소스
console.clear();
import React from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
// function App() {}
const App = () => {
return "하이";
};
ReactDOM.render(<App></App>, document.getElementById("root"));//ReactDOM.render(<App></App>, document.getElementById("root"));
ReactDOM.render(<App/>, document.getElementById("root"));
//이렇게 바꿔도됨없는 태그를 만들 수 있다. 어떻게??
리액트 컴포넌트화
/* 생략 */
const Hi = () => {
return <div>Hi!</div>;
}
const Hello = () => {
return <div>Hello!</div>;
}
const App = () => {
//jsx
return (
<div>
<Hi /> {/* Hi! */}
<Hello /> {/* Hello! */}
</div>
);
};
/* 생략 */리액트 inline CSS는 style = {{ }}
예시 정사각형, 원
const Square = () => {
return (
<div
style={{
width: "100px", {/* "key" : "value" */}
height: "100px",
"background-color": "red"
}}
>
정사각형!
</div>
);
};
const Circle = () => {
return <div style={{
width : "200px",
height : "200px",
backgroundColor : "blue",
borderRadius : "100%",
display : "flex",
alignItems : "center",
justifyContent : "center",
fontWeight : "bold",
color : "white",
fontSize : "25px"
}}>원</div>;
};
const App = () => {
//jsx
return (
<div>
<Square />
<Circle />
</div>
);
};만약 똑같은 스타일이면 변수로 넣고 스타일 따로 빼서 하면 공통 스타일로 쓸 수 있다.
코드펜
console.clear();
import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
let AppCallCount = 0;
const App = () => {
console.log("AppCallCount 실행 횟수: " + AppCallCount++);
const [num, setNum] = useState(100);
console.log("num : " + num);
return (
<>
<div>현재 숫자 : {num}</div>
<button
onClick={() => {
setNum(num + 1);
}}
>
버튼
</button>
</>
);
};
ReactDOM.render(<App />, document.getElementById("root"));리액트의 화면 갱신 원리??
기존에 했던 jsp 방식
브라우저 -> 톰캣에게 요청
톰캣이 JSP를 실행 -> 결과 HTML 생성
톰캣이 HTML 결과를 브라우저에 전송
브라우저가 받은 HTML을 랜더링리액트의 뷰 갱신 원리
바꿀 부분만 바꾼다.리액트는 불변성을 지켜줘야 한다.
- 전개구문
- 원본은 건드리지말아야한다.
const arr = [1, 2, 3];
const arr2 = [4, ...arr];
const arr3 = [...arr, 4];map : 원본 배열을 기반으로 복사본을 만든다.
const arr2 = arr.map(number => number + '번');JSX가 무엇일까??
- JSX(Javascript Syntax eXtension)는 Javascript 확장한 문법이다.
- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
- 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
ex)
// 실제 작성할 JSX 예시
function App() {
return (
<h1>Hello, GodDaeHee!</h1>
);
}
// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.
function App() {
return React.createElement("h1", null, "Hello, GodDaeHee!");
}- JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
- 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.
js 문법
- 반드시 부모 요소 하나가 감싸는 형태여야 한다.
- Virtual DOM에서 컴포넌트 변화를 감지할 때 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다
- 자바스크립트 표현식
-
JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.
-
한 모든 JavaScript 표현식을 넣을 수 있다.
function App() {
const name = 'GodDaeHee';
return (
<div>
<div>Hello</div>
<div>{name}!</div>
</div>
);
}
- if문(for문) 대신 삼항 연산자(조건부 연산자) 사용
- if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.
- 그렇기 때문에 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자(조건부 연산자)를 사용 한다.
ex) 방법1 외부에서 사용
function App() {
let desc = '';
const loginYn = 'Y';
if(loginYn === 'Y') {
desc = <div>GodDaeHee 입니다.</div>;
} else {
desc = <div>비회원 입니다.</div>;
}
return (
<>
{desc}
</>
);
}ex) 방법2 내부에서 사용
function App() {
const loginYn = 'Y';
return (
<>
<div>
{loginYn === 'Y' ? (
<div>GodDaeHee 입니다.</div>
) : (
<div>비회원 입니다.</div>
)}
</div>
</>
);
}ex) 방법3 AND연산자(&&) 사용
// 조건이 만족하지 않을 경우 아무것도 노출되지 않는다.
function App() {
const loginYn = 'Y';
return (
<>
<div>
{loginYn === 'Y' && <div>GodDaeHee 입니다.</div>}
</div>
</>
);
}ex) 방법4 즉시실행함수 사용
function App() {
const loginYn = 'Y';
return (
<>
{
(() => {
if(loginYn === "Y"){
return (<div>GodDaeHee 입니다.</div>);
}else{
return (<div>비회원 입니다.</div>);
}
})()
}
</>
);
}
- React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
1) JSX 스타일링 - JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다.
- 카멜 표기법으로 작성해야 한다. (font-size => fontSize)
ex) css style
function App() {
const style = {
backgroundColor: 'green',
fontSize: '12px'
}
return (
<div style={style}>Hello, GodDaeHee!</div>
);
}2) class 대신 className - 일반 HTML에서 CSS 클래스를 사용할 때에는 class 라는 속성을 사용한다. - JSX에서는 class가 아닌 className 을 사용한다.
ex) className
function App() {
const style = {
backgroundColor: 'green',
fontSize: '12px'
}
return (
<div className="testClass">Hello, GodDaeHee!</div>
);
}
- JSX 내에서 주석 사용 방법
- JSX 내에서 {/…/} 와 같은 형식을 사용 한다.
ex)
function App() {
return (
<>
{/* 주석사용방법 */}
<div>Hello, GodDaeHee!</div>
</>
);
}- 시작태그를 여러줄 작성시에는, 내부에서 // 의 형식을 사용할 수 있다.
function App() {
return (
<>
<div
// 주석사용방법
>Hello, GodDaeHee!</div>
</>
);
}- 개발자가 JSX를 작성하기만 하면, 리액트 엔진은 JSX를 기존 자바스크립트로 해석하여 준다. 이를 '선언형 화면' 기술이라고 한다. 앞으로 사용할 react의 기본문법이니 숙지하고 가도록 하자.
