React는 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리
리액트 프로그래밍 특징 3가지
- 선언형 : 코드를 자세히 분석하지 않아도 코드의 의도를 알 수 있게 작성하는 방식
✅ HTML/JavaScirpt/CSS를 나눠 적지 않고 JSX를 사용해 하나의 파일에 작성- 컴포넌트 : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트 기반의 개발
✅ 컴포넌트로 분리해 독립적이고 재상용성이 높은 개발 ⇒ 유지보수성 Up- 범용성 : 리액트는 JavaScript 프로젝트 어디든 유연하게 적용이 가능, React Native를 통해 모바일 개발 가능
JSX
JSX는 JavaScript가 확장된 문법이지만 브라우저가 바로 실행할 수 있는 JavaScript코드는 아니다.
Babel이 JSX를 JavaScript로 컴파일해 준다.
JSX 규칙
- 하나의 엘리먼트 안에 모든 엘리먼트가 포함 -여러 엘리먼트를 작성할 경우 opening tag와 closing tag로 감싸주기
<div>
<div>first element</div>
<div>second element</div>
</div>- class 속성은
className으로 표기(class로 표기시 JavaScript의 class로 인식)
<div className=”class”>content</div>- 바인딩 : JSX에서 JavaScript는 중괄호 사용({}로 감싸져 있지 않으면 텍스트로 인식)
function App(){
const messgae1 = 'React 바인딩';
const message2 = () => {return '{}을 사용';}
return (
<div className="myClass">
<p>{message1}은 {message2}한다.</p>
</div>
);
}- 사용자 정의 컴포넌트는 대문자로 시작
function MyComponent(){
return <div>My Component</div>;
}
function App(){
return <MyComponent />;
}- 조건부 렌더링은 삼항연산자 사용
<div>
{
(conditon === true)? <p>True</p>:<p>False</p>
}
</div>- 여러개의 HTML엘리먼트를 표시할 경우
map()사용
const students = [
{ id : 1, name : 'Jang', grade : 'B'},
{ id : 2, name : 'Kim', grade : 'A'},
{ id : 3, name : 'Park', grade : 'C'},
// ...
{ id : 100, name : 'Lee', grade : 'B'}
];
function StudentList() {
const studentList = students.map((student) => (
<div key={student.id}>
<h3>{student.name}</h3>
<p>{student.grade}</p>
</div>
));
return <div className="post-wrapper">{studentList}</div>;
}✅ map 메서드의 결과를 return문의 인라인으로 처리할 지 변수로 추출할지는 개발자가 판단할 몫!컴포넌트(Component)
하나의 기능 구현을 위한 여러 종류의 코드 묶음
React에서는 컴포넌트를 여러개 조합하여 어플리케이션을 제작
⇒ 컴포넌트 관계는 트리구조
컴포넌트 개발의 장점
- HTML을 수정해 구조를 변경하는 경우 구조와 스타일에 맞추어 자바스크립트가 DOM을 조작해야 하지만 컴포넌트 기반으로 설계한 경우 컴포넌트의 위치만 수정해부면 된다.
Virture DOM
리액트에서는 브라우저의 DOM에 접근하여 변화를 반영하는 것이 아니라 Virtual DOM에 한번 렌더링하고, 이를 기존의 DOM과 비교를 하여 변화가 필요한 곳만 렌 더링하기 때문에 기존의 방식보다 성능이 우수하다.
SPA(Single Page Application)
버로부터 단일 페이지를 응답 받고 클라이언트에서 화면을 구성하는 방식
클라이언트는 서버에서 데이터(JSON)를 요청하고 응답 받은 데이터를 이용해 화면을 갱신
서버의 입장에서 다수의 클라이언트로부터 요청이 발생해도 페이지를 생성하지 않고 요청 데이터만 반환하기 때문에 부하가 적음
SPA 단점
- JavaScript파일이 크기 때문에 첫 화면 로딩 시간이 길어 짐
- SPA의 경우 HTML에 별다른 정보가 없기 때문에 검색 엔진 최적화(SEO)가 좋지 않음
Wireframe
Wireframe은 디자인에 들어가기 전 선(wire)으로 윤곽선(frame)을 잡는 단계
목업(mockup)은 데스크탑, 스마트폰 등의 프레임을 덧씌워 직관적으로 이해하기 쉽게 다자인 한 것
React Router
npm으로 React Router DOM 설치
npm install react-router-dom@5.3.0라우팅(Routing) : 경로에 따라 뷰를 변화 시키는 과정
React Router 주요 컴포넌트
- : 라우터(Router)
- : 경로 매칭(Route Matchers)
- : 경로 매칭(Route Matchers)
- : 경로 변경(Route Changers)
import {BrowserRouter, Switch, Route, Link} from "react-router-dom";으로 import해서 사용
✅ 사용예시
function App() {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">MyPage</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<MyPage />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function MyPage() {
return <h1>MyPage</h1>;
}
function Dashboard() {
return <h1>Dashboard</h1>;
}
export default App;