.png)
리액트란?
- 자바스크립트 라이브러리 중 하나.
- 기능과 마크업이 결합된 JSX 문법을 사용하며, 컴포넌트 단위로 개발한다.
- 리액트의 가장 큰 3가지 특징으로는 선언형 프로그래밍, 컴포넌트 기반 개발, 높은 범용성이 있다.
- 선언형 프로그래밍
- 컴포넌트들을 만든 후 해당 컴포넌트들을 선언하여 구조를 작성하기 때문에 코드를 해석하지 않아도 컴포넌트의 이름만 보고서도 어느 정도 웹의 기능과 형태를 유추해 볼 수 있다.
- 이와 반대되는 건 명령형 프로그래밍.
- 컴포넌트 기반 개발
- 컴포넌트란, 독립적인 기능을 가진 코드 묶음.
- 리액트는 컴포넌트를 배치하여 웹 앱을 만든다.
- 컴포넌트의 장점
- 독립적으로 작동하여 다른 기능과 충돌 할 일이 없음. → 안정적
- 그러다 보니 다른 기능과의 충돌을 신경쓰지 않고 기능 개발에 집중 할 수 있음.
- 기능을 다시 활용하기 좋다.
- 오류 발생시 컴포넌트 별로 찾기가 용이하다.
- 오류가 발생하면 해당 컴포넌트만 고치면 되니 유지보수도 수월하다.
- 높은 범용성
- 프레임워크가 아니라 라이브러리이므로, JS를 사용하는 환경이라면 리액트에 속해있는 기능 중 필요한 기능만 적용 할 수도 있다.
CLA(create-react-app)
- 리액트로 페이지를 만들기 위해서 필요한 라이브러리 들을 한 곳에 모아둔 툴 팩
- 원하는 디렉토리에서 아래 명령어를 사용한다.
npx create-react-app 프로젝트 이름
- 그럼 프로젝트 이름으로 새로운 폴더가 생기고 여러 라이브러리들이 자동으로 받아진다.
컴포넌트 만들기
- 리액트 내부에서 컴포넌트를 만들 때는 두 가지 방식이 있다.
- 하나는 클래스형 컴포넌트이고, 다른 하나는 함수형 컴포넌트이다.
- 클래스형 컴포넌트
- 특징으로는
class 키워드를 사용하고, Component 를 상속받는다.
→ 이건 class 문법이라 아직은 잘 모르겠다..
render() 메소드가 필수적으로 있어야 한다.
class App extends Component {
render() {
<p>안녕하세요!</p>
}
}
export default App;
- 함수형 컴포넌트
- 클래스형 컴포넌트보다 뒤에 등장한 방법
- 함수의 형태로 작성해야하고, 필수적으로 함수 내부의 내용을
return 해주어야 한다.
function App () {
return(
<p>안녕하세요!</p>
)
}
export default App;
const App = function () {
return(
<p>안녕하세요!</p>
)
}
export default App;
const App = () => {
return(
<p>안녕하세요!</p>
)
}
export default App;
- 다 되지만, 아무래도 화살표 함수가 제일 편하다.
- 원래는
state 등의 관리를 사용할 수 없었지만, hook 이라는 개념이 생기고 해결되었다.
- 클래스 컴포넌트는 앞으로 자주 사용하진 않겠지만, 아직 해당 문법을 사용하는 경우가 있을 수도 있으니 알아두자.
컴포넌트 분리하기, 가져오기
- App.js 에서 모든 컴포넌트를 한번에 작성 할 수 는 있지만, 만약 규모가 큰 프로젝트가 된다면 하나의 문서에 모든 것을 정리하기에는 무리가 있다.
- 그럴때는 컴포넌트를 분리하여 다른 문서에 작성하고,
App.js에서 해당 문서를 불러와 사용하는 방법이 있다.
const Hello = () => {
return <p>안녕하세요!</p>
}
const App = () => {
return (
<h3>렌더링 될 화면입니다.</h3>
<Hello />
)
}
export default App;
- 기존의 문서의 형태가 위와 같을 때, 컴포넌트를 분리하고 불러오는 방식의 문서는 아래와 같다.
const Hello = () => {
return <p>안녕하세요!</p>
}
export default Hello;
import Hello from '/Hello.js'
const App = () => {
return (
<h3>렌더링 될 화면입니다.</h3>
<Hello />
)
}
export default App;
react-router-dom
- 리액트 내부에서 라우팅 기능을 사용 할 수 있게 해주는 라이브러리.
- 라우팅이란, 원하는 주소를 입력하면 해당 주소의 페이지로 이동 시켜주는 기능을 이야기한다.
- 일반 웹에서 페이지를 이동한다면, 모든 페이지가 새로고침되며 이동하겠지만, 리액트 라우터를 이용하면 주소를 지정한 컴포넌트만 새롭게 불러온다.
→ SPA의 장점
사용방법
- 먼저 아래의 명령어로
react router dom을 설치한다.
npm install react-router-dom
- 사용할 문서에서 라우팅 기능을 사용하기 앞서 가장 최소한의 컴포넌트들을 불러온다.
import{BrowserRouter, Switch, Route, Link } from 'react-router-dom';
- 크게 3개의 파트로 나눠 볼 수 있다.
- 라우팅 할 범위 지정하기 (BrowserRouter)
<BrowserRouter> 라우팅 할 요소들 </BrowserRouter> 로 사용한다.- 보통
app.js 에서 렌더링 될 구역을 모두 감싸는 식으로 사용한다.
- 만약
history객체를 사용 할 경우 index.js 에서 지정된 출력 될 컴포넌트 이름을 감싸준다.
- 컴포넌트에 주소 지정하기 (Switch, Route)
<Switch><Route path="사용할 주소"><컴포넌트 이름 /></Route></Switch> 으로 사용한다.Switch 는 주소가 일치하는 하나의 컴포넌트만 렌더링하게 해주는 컴포넌트이다.
→사실 Switch 는 생략되어도 되지만, 그럴 경우 한 path에 다른 path 의 주소가 포함되는 경우 두 컴포넌트를 모두 렌더링하게 된다.Route 는 컴포넌트를 감싸고, 그 속성값으로 path 를 이용하여 사용할 주소를 지정한다.
→ 여기서 사용된 path 의 속성값이 Link에서 참조하는 주소값이 된다.exact props 를 이용하여 해당 path와 정확히 일치하는 경우에만 이동하게 지정 할 수 있다.
→ 메인페이지의 path 가 / 인 경우 유용하다.
- 요소에 링크와 주소 연결하기 (Link)
<Link to="path 주소">요소</Link> 로 사용한다.Route에서 지정한 path 를 to의 속성 값으로 사용하고, 해당 요소를 클릭하면 해당 컴포넌트를 불러온다.NavLink를 사용하여 해당 요소가 클릭되었을때 단순히 렌더링만 하는 것이 아니라, 다른 행동을 동시에 할 수 있게끔 할 수 있다.
→ 클래스 추가나 함수 실행 등등- https://v5.reactrouter.com/web/api/NavLink (react-router-dom 공식문서)
- 만약, 페이지를 이동시키는 요소가 App.js 가 아닌 다른 컴포넌트에 존재한다면 해당 문서에서 Link를 불러와야한다.
→ 사이드메뉴 뭐 요런거
간단한 예제
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
const App = () => {
return (
<BrowserRouter>
<Link exact to="/">
<div>여길 누르세용</div> {
</Link>
<Switch>
<Route path="/"><컴포넌트 /></Route> {
</Switch>
</BrowserRouter>
)
}
export default App;
