Chapter. React
🌼 React Intro
리액트 = 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리
특징
- 선언형 : 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠적기보다는
하나의 파일에 명시적으로 작성할 수 있도록 JSX를 활용함- 컴포넌트기반 : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포턴트 기반 개발
컴포넌트 분리시 서로 독립적이고 재사용 가능 => 기능 자체에 집중
유지 보수와 테스트에 용이- 범용성 : JavaScript 프로젝트 어디에든 유연히 적용 가능
🌼 JSX
JavaScript XML,
react에서 ui를 구성할 때 상요하는 문법으로, JavaScript를 확장한 문법
JavaScript 코드가 아니므로 Babel로 컴파일하여 브라우저가 이해할 수 있게 변환시켜줌
DOM보다 명시적이며, 기능과 구조를 쉽게 파악 가능
컴포넌트 = 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋,
독립적인 기능을 가지며 UI의 한 부분을 담당
- JSX에서 여러 엘리먼트 작성시 Opening Tag
<>와 Closing Tag</>로 감싸
하나의 엘리먼트에 모든 엘리먼트가 포함되게 해야함- 또한 CSS class속성 지정시 className으로 표기
- JavaScript 사용시 중괄호
{}로 감싸주기- 엘리먼트를 JSX로 작성시 대문자로 시작
- 조건부 렌터링은 삼항연산자 사용
- 여러 개의 HTML 엘리먼트 표시시 map()함수 사용
"key"속성을 넣어줄 것
🌷 React SPA
HTML 문서 전체가 아닌 업데이트에 필요한 데이터만 서버에서 전달받아
데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 보여주는 방식
페이지 전체를 렌더링하는 것이 아니기 때문에 사용자의 interaction에 빠르게 반응
서버 과부하 문제도 줄일 수 있으며 더 나은 유저 경험 제공
단, JavaScript 파일 크기가 때문에 첫 화면 로딩 시간이 길어짐
또한 검색 엔진 최적화(SEO)가 좋지 않음
🌷 React route
라우팅 : 다른 주소에 따라 다른 보여주는 과정
<BrowserRouter>: 새로고침하지 않고도 주소를 변경할 수 있게 해줌<Switch>: 여러<Route>를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜줌<Route>: path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정함<Link>: 경로를 연결해주는 역할 - 페이지 전환을 방지함
import React from 'react'
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));
function App () {
return (
function App() {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
</li>
<li>
<Link to="/about">MyPage</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
</nav>
{/* 주소경로와 우리가 아까 만든 3개의 컴포넌트를 연결해줍니다. */}
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about"> {/* 경로를 설정하고 */}
<MyPage /> {/* 컴포넌트를 연결합니다. */}
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</BrowserRouter>
);
}
function Home() { // Home 컴포넌트
return <h1>Home</h1>;
}
function MyPage() { // MyPage 컴포넌트
return <h1>MyPage</h1>;
}
function Dashboard() { // Dashboard 컴포넌트
return <h1>Dashboard</h1>;
}
export default App;🌹 Props
컴포넌트의 속성, 변하지 않는 외부에서 전달받은 값
부모 컴포넌트로부터 전달 받은 값
객체 형태이며 변경될 수 없는 읽기 전용 - 단방향, 하향식 데이터 흐름
- 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의
- props를 이용하여 정의된 속성을 전달
- 전달받은 props 렌더링
**App.js**
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello name="salt" />
);
}
export default App;**Hello.js**
import React from 'react';
function Hello({ color, name }) {
return <div style={{ color }}>안녕하세요 {name}</div>
}
export default Hello;
export default App;🌻 State
컴포넌트 내부에서 변할수 있는 값, 상태
setState로 state 값을 변경
import { useState } from "react";
function CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다.
const [isChecked, setIsChecked] = useState(false);
//const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
}
const handleChecked = (event) => {
setIsChecked(event.target.checked);
};
return (
<div className="App">
<input type="checkbox" checked={isChecked} onChange= {handleChecked} />
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
</div>
);
}
🍂 Event handling
React에서 이벤트는 카멜 케이스 사용
JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수 전달<button onClick={handleEvent}>Event</button>
🍂 onChange
<input><textarea><select>와 같은 폼 엘리먼트에서 변경될 수 있는input값을e.target.value를 통해 읽어올 수 있음
onChange는input의 텍스트가 바뀔 때에 발생하는 이벤트로,
이벤트가 발생하면handleChange함수가 작동하며
이벤트 객체에 담긴input값을setState를 통해 새로운 state로 갱신
function NameForm() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
}
return (
<div>
<input type="text" value={name} onChange={handleChange}></input>
<h1>{name}</h1>
</div>
)
};onClick
클릭을 하였을 때 발생하는 이벤트이며 ,사용자의 행동에 따라
app이 반응해야 할 때 자주 사용하는 이벤트
function NameForm() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
}
return (
<div>
<input type="text" value={name} onChange={handleChange}></input>
<button onClick={alert(name)}>Button</button>
<h1>{name}</h1>
</div>
);
};