0. React Project 시작하기
npx create-react-app { 프로젝트 이름 }1. React란?
React 소개
React는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.- 자바스크립트에 HTML을 포함하는
JSX(JavaScript XML)라는 간단한 문법과단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있다.가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리이다.
React 특징
- JSX
- 컴포넌트
- Virtual Dom
- 단방향 데이터 바인딩
수업내용 1 : 리액트 코드 맛보기
// index.js(리액트는 index.js에서 시작된다)
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root"); // public/html에 있는 id="root"에 렌더링
const root = createRoot(rootElement);
root.render(
<p>Hello</p>
);1-1. JSX(JavaScript Syntax Extension)란?
JSX 소개
JSX(JavaScript Syntax Extension)는 HTML을 마치 JS처럼 편리하게 사용하기 위한 리액트 JS 확장 문법이다.- HTML 문법을 JavaScript 코드 내부에 쓴 것이다.
JSX 규칙
- 속성은 따옴표로 감싼다.
<속성="">- 반드시 태그를 닫는다.
<></>- 모든 태그는 Self-closing 이 가능하다.
</>- JSX에서는 여러 개의 요소를 표현할 경우, 반드시 하나의 부모로 감싸야 한다.
return <></>- JSX 내부에서는 자바스크립트의 변수를 전달하여 사용할 수 있다.
( 변수값은 중괄호로 감싸서 표현<변수={123}>)
// JSX 특징(반드시 하나의 부모로 감싸야 한다) 예제 코드
// 이 코드는 Text와 <StatusBar>가 하나의 부모로 감싸져있지 않기 때문에 오류가 발생한다.
export default function App() {
return (
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
)
}
// 이 코드는 전체가 하나의 <div> 태그로 묶여져 있기 때문에 잘 작동한다.
export default function App() {
return (
<div> // 태그가 여러 개 있을 땐 하나의 태그로 묶어준다.
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
<div>
)
}1-2. 컴포넌트
컴포넌트 소개
- 리액트로 만들어진 앱을 이루는
최소한의 단위.- 단일 기능을 하는 여러 컴포넌트 모듈을 쌓아서 하나의 어플리케이션을 만든다.
컴포넌트 특징
- 컴포넌트 이름은 항상 대문자로 시작하도록 한다.
- 재사용을 할 수 있으며 이런 재사용을 통해 개발 생산성을 향상시킬 수 있다.
컴포넌트에서 반환할 수 있는 값들
1. div 리액트 요소
export default function App() { return <div>안녕하세요</div>; }2. 컴포넌트
export default function App() { return <Counter />; }3. 문자열 / 숫자
export default function App() { return '안녕'; }4. 배열
export default function App() { return [<p key={1}>world</p>, <p key={2}>hello</p>]; }
- 이외에도 Fragment, null, boolean, portal 등이 있다.
수업 내용 2 : 컴포넌트 사용하기
// 컴포넌트 사용하기
// 함수 첫 글자는 대문자 사용 (Page)
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
function Page() {
return (
<div>
<h1>자기소개</h1>
<p>이름 : 백서진</p>
<p>학번 : 2212</p>
<p>취미 : 축구 경기 시청</p>
<p>특징 : 내성적</p>
<p>mbti : INFP</p>
</div>
);
}
root.render(
<Page />
);1-3. Virtual Dom(가상 돔)
Virtual Dom 소개
- React에서 제공하는 가상의 DOM.
- 가상의 DOM에서 변경된 내용만 먼저 확인해서 실제 DOM에 업데이트 하는 불필요한 단계를 줄인다.
DOM vs Virtual Dom
Dom : 조그만 변화가 일어나면
모든 DOM을 리렌더링하여 성능의 저하를 발생시킨다.
Virtual Dom :변화가 일어난 부분만 리렌더링하여 일반 Dom보다 렌더링 성능이 우수함.
리렌더링 과정
- 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM와 비교하여 바뀐 부분만 실제 DOM에 적용한다.
1-4. 단방향 데이터 바인딩
데이터 바인딩이란?
- 데이터 바인딩 이란 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 즉 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다.
- 데이터 바인딩에는 양방향 데이터 바인딩, 단방향 데이터 바인딩이 있다.
- React는 단방향 데이터 바인딩을 사용한다.
단방향 데이터 바인딩
- 장점
- 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신이 가능하다.
- 데이터 흐름이 단방향(부모->하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽다.
- 단점
- 변화를 감지하고 화면을 업데이트 하는 코드를 매번 작성해야 함
2. Challenge
1. li로 Thing1, Thing2를 리액트로 렌더링 해보기
// challenge(문제)
// li로 Thing1, Thing2를 리액트로 렌더링 해보기
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<ul>
<li>Thing1</li>
<li>Thing2</li>
</ul>
);
// ctrl + / : 전체주석2. react로 h1 p 두개 출력하기
// challenge
// react로 h1 p 두개 출력하기
// render() 안에는 한 덩어리만 출력된다
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<div> // render() 안에는 한 덩어리만 출력되기 때문에 div 태그로 h1과 p를 묶는다
<h1>Hi</h1>
<p>bye</p>
</div>
);3. 자기소개 페이지 react로 만들기
// challenge
// 자기소개 웹사이트
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<div>
<h1>자기소개</h1>
<p>이름 : 백서진</p>
<p>학번 : 2212</p>
<p>취미 : 축구 경기 시청</p>
<p>특징 : 내성적</p>
<p>mbti : INFP</p>
</div>
);
4. 자신이 좋아하는 영화 or 애니 소개 페이지
// challenge
// component 3개를 만듭니다
// Header MainContent Footer
// Header: header nav img
// MainContent: div h1 ol li
// Footer: footer small
// 자신이 좋아하는 영화 혹은 애니 소개
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
function Header() {
return <h1>벼랑 위의 포뇨</h1>;
}
function MainContent() {
return <p>내용</p>;
}
function Footer() {
return <p>끝</p>;
}
root.render(
<div>
<Header />
<MainContent />
<Footer />
</div>
);5. App으로 컴포넌트를 묶기
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
function Header() {
return (
<header>
<h1>벼랑 위의 포뇨</h1>
</header>
);
}
function MainContent() {
return <p>내용</p>;
}
function Footer() {
return <p>끝</p>;
}
function App() {
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
);
}
root.render(<App />); // 앱으로 묶기 3. 오늘 새로 알게 된 것
- A 파일에서 B 파일을 불러오려면 B파일의 함수를
export import function 함수이름() { }형식으로 작성해야 한다.
( index.js의 함수를 제외하고는 모두
export default function 함수이름() { }형식으로 작성해야 한다. )
- 리액트에서는 단일 태그를 쓰면 무조건 뒤에 닫는 태그를 넣어야 한다.
ex)<Main />,<Header />등
