10. SPA (Single Page Application)란?
페이지가 꾸며지는 순서
- public/index.html: HTML 템플릿 파일. div 앨리먼트의 id를 root로 해놓음
- src/index.js: 자바스크립트 시작점. id가 root인 div 앨리먼트를 잡아주고 App.js에 연결해서 그 앨리먼트를 꾸밀 수 있게 됨
- App.js: 여기에서 잡아놓은 앨리먼트를 꾸밈
Single Page Application (SPA)
원래 전통적인 방식의 웹 사이트는 Multi Page Application으로 여러개의 페이지를 만들어서 각 페이지를 연결하는 식으로 만들었음
하지만 요즘에는 앱 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가면서 보여주는 방식을 사용함. 이것이 Single Page Application
SPA에서 화면 변경이 이루어지는 원리
Multi Page Application에서는 a 페이지에서 b 페이지로 전환할 때 a.html을 보여주다가 b.html을 보여주면 됐지만, index.html 하나밖에 없는 SPA에서는 어떻게 페이지 전환(브라우징)을 할까?
-> HTML 5의 History API를 사용
React-Router-Dom에서 History API를 사용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해줌
History API
| 메서드 | 설명 |
|---|---|
| History.back() | 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누른 것과 같은 효과 |
| History.forward() | 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누른 것과 같은 효과 |
| History.go() | 특정한 세션 기록으로 이동하게 해주는 비동기 메서드. 1을 넣어 호출하면 바로 앞 페이지로, -1을 넣어 호출하면 뒤 페이지로 이동 |
| History.pushState() | 주어진 데이터를 세션 기록 스택에 넣음. 직렬화 가능한 모든 Javascript 객체를 저장하는 것이 가능 |
| History.replaceState() | 최근 세션 기록 스택의 내용을 주어진 데이터로 교체 |
11. CRUD 앱 소개 및 JSX 알아보기
JSX (Javascript syntax extension)란?
JSX는 자바스크립트의 확장 문법이다. 리액트에서는 이 JSX를 이용해서 화면의 UI를 정의한다
JSX를 사용하면 UI를 나타낼때 자바스크립트 로직과 HTML 구조를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있음
JSX를 사용하지 않으면?
JSX를 사용하지않고 원래 리액트에서 화면을 그리는 방식은 React.createElement API를 사용해서 앨리먼트를 생성한 후, 이 앨리먼트를 In-Memory에 저장. 그리고 ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려줌
JSX는 createElement를 쉽게 사용하기 위해 사용함
모든 UI를 만들때 마다 createElement를 사용해서 컴포넌트를 만들면 너무 복잡함. 따라서 JSX를 사용해서 작성 후 그걸 바벨이 내부에서 자동적으로 createElement로 바꿔서 사용함
JSX를 사용하면서 주의해야 할 문법 (문법 규칙)
JSX로 작성할 때 컴포넌트안에 여러 앨리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 함
예시)
// 잘못된 코드
function hello(){
return (
<div>Hello world!</div>
<div>what are you doing</div>
)
}
// 올바른 코드
function hello(){
return <div>
<div>Hello world!</div>
<div>what are you doing</div>
</div>;
}15. 리액트 아이콘 사용하기
리액트에서 아이콘을 사용하는 방법은 여러가지지만 주로 react-icons 모듈을 이용해서 아이콘을 구현함
사용방법
- 필요한 패키지 설치: npm install react-icons
- 사용법: https://react-icons.github.io/react-icons/
16. Props를 통해 컴포넌트 간 데이터 전달
Props란?
Props는 Properties의 줄인말
- Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는데 사용됨
- Props는 읽기 전용으로 자녀 컴포넌트 입장에서는 변하지 않음
(변하게 하고자 하려면 부모 컴포넌트에서 state를 변경시켜 줘야함)
예시)
// 부모 컴포넌트에서 내려주기
initialExpenses = [
{ id: 1, charge: '콜라', amount: 2000 },
{ id: 2, charge: '빵', amount: 1000 },
{ id: 3, charge: '맥북', amount: 20000 },
]
<자식컴포넌트 initialExpenses={this.initialExpenses} />
// 자식 컴포넌트에서 받아오기
this.props.initialExpenses18. JSX Key 속성 이해하기
JSX Key 속성
리액트에서 요소의 리스트를 나열할 때는 key를 넣어줘야 됨
키는 react가 변경, 추가 또는 제거된 항목을 식별하는 데 필요
요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 함
리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용
이때 바뀐 부분을 식별하기 위해서는 Key가 필요
Key 사용 방법
key에는 유니크한 값을 넣어줘야 함 (index는 비추천!)
index도 0부터 시작하는 유니크한 값을 가지지만 만약 리스트가 추가되거나 삭제되면 해당 리스트들의 key 값도 전부 바뀌게 됨
