React
웹과 네이티브 UI를 위한 '라이브러리'
Vite로 React setting (yarn사용시)
yarn create vite 생성할폴더이름 --template react
cd 생성한폴더이름
yarn
yarn dev
SPA(Single Page Application)
하나의 페이지로 이루어져 있는 애플리케이션
이미지 출처
-
MPA : 전통적인 웹 애플리케이션으로, 사용자가 새로운 페이지로 이동할 때마다
서버로부터 새로운 페이지를 로드하여 보여주는 방식
-검색엔진에 잘 인식됨, 페이지 분리해서 작업가능
-전환할 때마다 새로 로드하므로 느림.
-백엔드 프론트엔드간의 연결이 복잡 -
SPA : 페이지 전체를 다시 로드하지 않고 필요한 데이터만
비동기적으로 서버로부터 가져와 동적으로 현재 페이지를 업데이트
-페이지 전환시 반응빠름, 프론트 백엔드 명확하게 분리
-초기로딩시간 김
-검색엔진 최적화 문제
React는 SPA
Routing
어느 페이지로 이동할지 안내해줌. => 웹서비스 내부의 내비게이션
Hashed Routing
해쉬값을 기준으로 (#뒤) 페이지를 이동
[출처] 스파르타 ReactJS 입문 노션
- origin : 웹서버 위치
- path, query string : 요청에 대한 상세한 요구사항을 담은 값
서버에는 해시(#) 뒤의 부분이 전송되지 않기 때문에
모든 라우팅 로직이 로컬 측에서 처리됨.
React는 번들링 도구를 이용, Browser Routing 방식을 주로 채택
=> Hashed Routing이 아니여도 단 하나의 html만 요청할 수 있도록 내부적으로 처리
컴포넌트와 JSX
컴포넌트
독립적이고 재사용 가능한 개별적인 여러 조각
props 라고 하는 인풋값을 받은후, 화면에 표현될 React 엘리먼트를 반환
리액트 컴포넌트를 표현하는 두 가지 방법
- 함수형 컴포넌트
// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 더 쉽게
function App () {
return <div>hello</div>
}- 클래스형 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}두가지 모두 기능상 동일하지만, 함수형 컴포넌트가 쉽고 공홈에서도 권장.
*리액트 컴포넌트 => 함수
컴포넌트 위치설명
import { useState } from 'react' //컴포넌트 밖에서 필요한 파일을 가져오는 부분
...
function App() {
const [count, setCount] = useState(0) //자바스크립트 작성부분
...
return ( //return아래로 JSX를 쓰는 영역
//html코드와 값들이 화면에 보여지는부분
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
//자바스크립트에서 작성한 함수를 return 이하에서 쓸려면 {함수명} 중괄호
</a>
...
...
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App //내가 만든 컴포넌트를 밖으로 보내는 부분주의사항
컴포넌트 만들때 반드시 가장 첫 글자는 대문자 (파스칼케이스)
폴더는 소문자로 시작(카멜케이스)
부모자식 컴포넌트
컴포넌트는 다른 컴포넌트를 품을 수 있음.
function App(){
return (
<div>
안녕하세요.
<Mother /> //Mother 컴포넌트를 App안으로 가져옴
</div>
)
}
function Child(){
return <div>자식입니다</div>
}
function Mother(){
return (
<div>
엄마입니다
<Child /> //Child 컴포넌트를 Mother안으로 가져옴
</div>
)
}
//App안에 Mother컴포넌트 안에 Child가 있음
export default App;JSX
JavaScript를 확장한 문법.
JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법
HTML 태그는 .js에서 쓸수 없음. jsx에서는 가능.
const start_half = <div>
<h1>안녕하세요!</h1>
<p>시작이 반이다!</p>
</div>;jsx에서의 <div>~</div>는 DOM요소가 아님. 리액트는 가상돔(Virtual DOM)을 사용
브라우저에서는 jsx파일을 해석할 수 없기 때문에
자바스크립트 컴파일러인 babel을 이용해 jsx를 js로 변환후 해석.
사용법
- return문 안에 한개의 엘리먼트만 반환하기
function App() {
return (
<p>안녕하세요! :)</p>
<div className="App">
<input type='text'/>
</div>
);
}
//오류남
function App() {
return (
<div className="App">
<p>안녕하세요! :)</p>
<input type="text" />
</div>
);
}//하나의 박스로 감싸주고 그안에 여러 요소들을 집어넣음.- 태그닫기
<input type='text'/> //뒤에 슬래시(/)를 이용하여 자기 자신을 닫는방식으로 작성- class 가 아닌 className
<div className="App"> //React에서 class는 className로 작성. id는 그대로 id- JSX에서 javascript 값을 가져오기
function App() {
const cat_name = 'perl';
return (
<div>
hello {cat_name}! //중괄호 안에 변수명
//중괄호 안에 직접 표현식을 작성할수도 있음.
//<p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
</div>
);
} - 인라인으로 style설정
function App() {
const styles = { //스타일 객체를 변수로 만들고 리턴문에서 할당하는방법
color: 'orange',
fontSize: '40px'
};
return (
<div className="App">
<p style={styles}>orange</p>
//<p style={{color: 'red', fontSize: '20px'}}>orange</p>
//이런식으로 표현식을 스타일객체를 작성하고 리턴문 안에 직접 삽입할수도 있음
</div>
);
}
export default Appprops
부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터. 컴포넌트 간의 정보 교류 방법
props는 반드시 위에서 아래로만 전달(단방향)
자식 컴포넌트에서는 부모 컴포넌트로 props는 불가능.
props는 읽기전용.
props로 값 전달받고 출력하기
function App() {
return <GrandFather />;
}
function GrandFather() {
return <Mother />;
}
function Mother() {
const firstName = '홍';
return <Child motherName = {firstName} />; //Child의 props로
} //motherName(키)을 전달
//React에서 컴포넌트에 props를 전달할 때 키=값 형태로 작성. 표현식일경우 {}중괄호
function Child(props) {
const name = "John"
return (
<div>
<p>{`내이름은 ${props["motherName"]}${name} 입니다`}</p>
//부모에게서 props로 받은 객체값(motherName = {firstName})을 사용가능
</div>
);
}props drilling
할아버지 -> 아버지 -> 아들 -> 손자 이런식으로 데이터를 순차적으로 내려주는 현상
바람직하지 않음.
Redux와 같은 상태 관리 라이브러리나 컨텍스트(Context) API 같은 방법을 사용
props children
