<목차>
1. react 프레임워크
2. react 라우팅
3. customhook
1. react 프레임워크 CAR
CAR
리액트에서 공식으로 만들어준 프레임워크가 있는데 개발자들이 개발을 편하게 하라고 만들어준 프레임워크입니다.
리액트 프로젝트를 쉽게 생성하고 초기 설정을 자동화해주는 도구
명령어 한 줄(npx create-react-app 프로젝트명)로
Webpack, Babel, ESLint 등 필수 설정이 포함된 환경을 바로 구성할 수 있습니다.
사용법
npx create-react-app [프로젝트명]
이렇게 쓰면 우리가 원하는 프로젝트 명을 가진 CAR 가 생성됩니다.
생성된 디렉토리 구조
├─ node_modules
├─ public
│ ├─ favicon.ico
│ ├─ index.html
│ ├─ logo192.png
│ ├─ logo512.png
│ ├─ manifest.json
│ └─ robots.txt
└─ src
│ ├─ App.css
│ ├─ App.js
│ ├─ App.test.js
│ ├─ index.css
│ ├─ index.js
│ ├─ logo.svg
│ ├─ reportWebVitals.js
│ └─ setupTests.js
├─ .gitignore
├─ package-lock.json
├─ package.json
└─ README_md
처음보는 폴더와 구조들이 많지만 기존에 많이 써왔던 src 폴더에 익숙한 파일들이 몇게 보이는것을 확인 할 수 있습니다.
entry : 번들링이 시작될 진입점(메인 파일) => ./src/index.js
src/App.js : 브라우저에 실질적으로 출력될 화면을 담당하는페이지 다른 컴포넌트를 불러와서 화면에 표시
public/index.html : 실제 웹페이지의 뼈대 /src/index.js 에서 만들어진 리액트 앱이 삽입
package.json
프로젝트 설정, 의존성(라이브러리) 정보, 스크립트 명령어가 담겨 있습니다.
- start => npx webpack server => 서버 실행(메모리 번들링)
- build => npx webpack => 전체 파일 번들링(빌드)
그 외 폴더
reportWebVitals.js
- 성능 측정용 스크립트
setupTests.js, App.test.js
- 테스트 환경 설정, 테스트 코드 샘플
2. react 라우팅
react 에서의 라우트는 기존의 html 처럼 a테그 등을 누르면 링크가 바뀌는게 아니라 특정라우트에 대한 컴포넌트를 보여주는 형식입니다. 때문에 react 에서 내놓은 해결책으로 react-router-dom 을 내놓게 되었습니다 .
react-router-dom
리액트에서 제공하는 외부모듈로서 route 와 route 컴포넌트를 연결해주는 역할을 합니다.
URL은 변경되지만, 전체 페이지를 다시 안불러오고
브라우저가 이미 내려받은 React코드로 화면 일부만 변경(렌더링)
NavLink
NavLink 는 react 에서 사용하는 a 테그와 마찬가지러 경로를 지정해서 이동하는 역할을 합니다.
<NavLink to="/about">About</NavLink>
to 를 이용하여 이동할 링크를 지정 하여 원하는 경로를 지정
내부적으로 history.pushstate 를 사용해 URL 을 변경하고 화면 갱신을 해줍니다. NavLink를 사용할 때 새로고침은 발생하지 않습니다. React 라우터는 브라우저의 history API를 활용해 경로 변경을 처리하고, 페이지를 새로고침하지 않고도 새로운 컴포넌트를 렌더링합니다.
단 다른컴포넌트를 렌더링하는 것이기때문에 그전 컴포넌트의 상태는 연결되지않습니다.
react-router-dom route 사용
1. **App.jsx**에서 `<BrowserRouter>`로 감싸고, `<Routes>` 안에 `<Route>`들을 선언
2. `<Route path=\"/about\" element={<About />}/>`처럼 **경로와 컴포넌트**를 연결
3. `<NavLink to=\"/about\">About</NavLink>`로 링크를 클릭 → **URL만 변경** + **React가 해당 컴포넌트** 표시
route 로 해당 경로에대한 컴포넌트를 연결
function App() {
return (
<div className="App">
<BrowserRouter>
{/* Header 에 관련된 Routes */}
<Routes>
<Route path="*" element={<Header/>}/>
</Routes>
{/* Content 에 관련된 Routes */}
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/about" element={<About/>}/>
<Route path="/contact" element={<Contact/>}/>
<Route path="/login" element={<Login/>}/>
<Route path="/customhooktest" element={<CustomHookTest/>}/>
<Route path="/customhooktest2" element={<CustomHookTest2/>}/>
</Routes>
{/* Footer 에 관련된 Routes */}
</BrowserRouter>
</div>
);
}
해더부분에 NavLink로 경로를 연결
export const Header = () => {
return (
<HeaderWrapper>
<ul>
<li>
<StyledNavLink to="/">Home</StyledNavLink>
</li>
<li>
<StyledNavLink to="/about">About</StyledNavLink>
</li>
<li>
<StyledNavLink to="/contact">Contact</StyledNavLink>
</li>
<li>
<StyledNavLink to="/login">Login</StyledNavLink>
</li>
<li>
<StyledNavLink to="/customhooktest">CustumHookTest</StyledNavLink>
</li>
<li>
<StyledNavLink to="/customhooktest2">CustumHookTest2</StyledNavLink>
</li>
</ul>
</HeaderWrapper>
)
}
3. customhook
customhook 은 react 의 hook을 활용하여 만든 사용자 정의 함수를 나타냅니다.
여러 컴포넌트에서 공통적으로 사용하는 함수를 컴포넌트 처럼 만들어서 재사용이 가능하게 만드는것
use로 시작하는 네이밍을 가지며 일반적으로 react 의 기본 훅을 내부에서 사용합니다.
customhook 을 사용하는이유
1. 코드의 재사용성이 증가합니다
반복되는 이벤트를 만들때마다 계속 만들어서 사용하는 것 보다 하나의 커스텀 훅으로 관리
2. 컴포넌트의 코드 가독성 항샹
반복되고 복잡한 로직이 많을때 커스텀훅으로 분리하여 사용하면 컴포넌트 코드가 더 깔끔해집니다.
3. 상태 관리 로직을 분리하여 관심사 분리
useEffect 나 useState 등의 로직을 컴포넌트 내부가 아니라 별도 훅으로 관리하면 더 좋습니다.
customhook 사용
커스텀 훅을 사용하기전 코드
export const CustomHookTest = () => {
const [userid, setUserId] = useState();
const [password, setPassword] = useState();
const [email, setEmail] = useState();
const [address, setAddress] = useState();
const navigate = useNavigate();
const handleUserId = (e) => {
setUserId(e.target.value)
}
const handlePassword = (e) => {
setPassword(e.target.value)
}
const handleEmail = (e) => {
setEmail(e.target.value)
}
const handleAddress = (e) => {
setAddress(e.target.value)
}
const handleSubmit = (e) => {
e.preventDefault();
if(userid === "wnqudgus1234"&& password === "qwer1234") {
navigate("/");
} else {
navigate("/login");
}
}
return (
<form onSubmit={handleSubmit}>
<input type="text" value={userid} onChange={handleUserId}/>
<input type="password" value={password} onChange={handlePassword}/>
<input type="email" value={email} onChange={handleEmail}/>
<input type="text" value={address} onChange={handleAddress}/>
<button type="submit">로그인!</button>
</form>
)
}
하나의 입력값마다 하나의 상태와 이벤트 를 만들어줘야하기 때문에 상태 관리가 복잡하고 어렵습니다.
여기서 반복되는 로직인 state 관리와 onChange 이벤트를 hook으로 만들어보겠습니다.
반복되는 로직을 hook으로 만듬
useInput
import { useState } from "react";
export const useInput = (init) => {
const [value, setValue] = useState(init);
const handleChangeInput = (e) => {
const {value} = e.target
setValue(value)
}
return {
value,
handleChangeInput
}
}
useInput 을 호출하여 customhook으로 사용
import { useInput } from "../hooks/useInput"
export const CustomHookTest = () => {
const userid = useInput("");
const password = useInput("");
const email = useInput("");
const address = useInput("");
const navigate = useNavigate();
const handleSubmit = (e) => {
e.preventDefault();
if(userid === "wnqudgus1234"&& password === "qwer1234") {
navigate("/");
} else {
navigate("/login");
}
}
return (
<form onSubmit={handleSubmit}>
<input type="text" value={userid.value} onChange={userid.handleChangeInput}/>
<input type="password" value={password.value} onChange={password.handleChangeInput}/>
<input type="email" value={email.value} onChange={email.handleChangeInput}/>
<input type="text" value={address.value} onChange={address.handleChangeInput}/>
<button type="submit">로그인!</button>
</form>
)
}
모든 상태와 onChange 이벤트를 hook으로 관리하기 때문에 코드가 간결해지고 반복해서 변수명을 지어줄 필요가 없어짐