리액트란?
•
리액트(React)
◦
A Javascript library for building user interfaces.
(사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리)
◦
라이브러리는 개발자에게 권한이 있음, 프레임워크는 제어 권한이 프레임워크 자신에게 있음
◦
SPA (Single Page Application)
▪
하나의 페이지에만 존재하는 웹사이트
◦
state - 리액트 컴포넌트 상태
▪
웹 사이트 규모가 커지면 컴포넌트 개수가 많아지면서 상태 관리의 복잡도가 증가
◦
규모 큰 프로젝트에선 상태 관리를 위해 Redux, Mobx, Recoil 등의 외부 상태 관리 라이브러리 사용
리액트 설치
•
리액트 설치
◦
◦
설치 후 버전 확인
node -v
npm -v
Plain Text
복사
◦
react 프로젝트 생성
sudo npx create-react-app [프로젝트명]
입력하면 프로젝트가 생성됨.
(sudo를 적지 않았을때 오류가 발생...)
Plain Text
복사
프로젝트 폴더를 vscode에서 다시 열어준 후
터미널에 npm start를 치면 크롬으로 미리보기가 뜬다.
Plain Text
복사
◦
react 폴더 권한 해제 ⇒ 해제 안해주면 저장이 안 됨!
sudo chmod -R 777 /Users/haminsung/desktop/frontproject/react
Plain Text
복사
JSX
•
JSX
◦
자바스크립트의 확장 문법
◦
Javascript와 XML/HTML 을 합친 것 → Javascript anc XML의 앞 글자를 따서 JSX라고 부름
◦
자바스크립트와 HTML 코드가 결합된 상태
const element = <h1>Hello, React.js</h1>
JavaScript
복사
•
JSX 역할
◦
JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거친다.
// 두 코드 모두 동일한 코드
const element1 = (
<h1 className='title'> Hello, React.js </h1>
)
const element2 = React.createElement(
'h1'
{className : 'title'},
'Hello, React.js'
)
const element3 = {
type: 'h1',
props: {
className: 'title',
children: 'Hello, React.js'
}
}
JavaScript
복사
◦
Type: 엘리먼트의 유형
▪
<div>나 <span> 같은 HTML 태그가 올 수도 있고, 다른 리액트 컴포넌트가 들어갈 수도 있음
▪
props : 엘리먼트의 속성
▪
children : 현재 엘리먼트가 포함하고 있는 자식 엘리먼트
const element2 =
React.createElement(
type,
props,
children
)
JavaScript
복사
•
실습
// Team.Js
import React from "react";
import Player from "./Player";
function Team (props) {
return (
<div>
<Player playerName='손흥민1' playerNumber='71'></Player>
<Player playerName='손흥민2' playerNumber='72'></Player>
<Player playerName='손흥민3' playerNumber='73'></Player>
</div>
)
}
export default Team;
JavaScript
복사
// Player.js
import React from "react";
function Player(props) {
return (
<div>
<div>축구선수 정보 출력</div>
<ul>
<li>선수 이름 : {props.playerName}</li>
<li>선수 번호 : {props.playerNumber}</li>
</ul>
</div>
)
}
export default Player;
JavaScript
복사
// ConfirmDialog.js
import React from "react";
function Button(props) {
return (
<button className={`bg-${props.color}`}>
{props.children}
</button>
)
}
function ConfirmDialog(props) {
return (
<div>
<p>내용을 확인하셨다면 버튼을 클릭하세요</p>
<Button color='green'>
확인 버튼
</Button>
</div>
)
}
export default ConfirmDialog;
JavaScript
복사
컴포넌트
•
컴포넌트
◦
모든 페이지가 컴포넌트로 구성되어 있음
◦
하나의 컴포넌트는 또 다른 여러 개의 컴포넌트 조합으로 구성될 수 있음
◦
리액트 컴포넌트는 props 값을 입력 받아서 리액트 엘리먼트 객체를 반환
•
props의 중요한 특징은 읽기전용(ReadOnly)
◦
값을 변경할 수 없음
◦
props의 값은 리액트 컴포넌트가 엘리먼트를 생성하기 위해 사용하는 값
◦
다른 props 값으로 엘리먼트를 생성하려면 새로운 값을 컴포넌트에 전달하여 새로 엘리먼트를
생성해야 함
◦
이 과정에서 엘리먼트가 다시 렌더링됨
◦
pure 하다
▪
같은 입력값에 대해서는 항상 같은 출력값을 리턴함
◦
Impure 하다
▪
입력으로 받은 파라미터 값을 변경함
◦
사용법
▪
JSX 사용하는 경우 키와 값으로 이루어진 키-값 쌍의 형태로 컴포넌트에 props를 넣을 수 있음
function Team(props) {
return (
<Player playerName='SON' playerNumber={7}</Player>
)
}
JavaScript
복사
•
컴포넌트 종류
◦
클래스 컴포넌트와 함수 컴포넌트
▪
초기버전에서는 클래스 컴포넌트 주로 사용
▪
최근에는 함수 컴포넌트 개선해서 주로 사용하게 됨
▪
함수 컴포넌트 개선하는 과정에서 훅(hook)이 개발되어 현재 리액트 개발에서는 거의 훅을 사용
◦
클래스 컴포넌트
▪
ES6의 클래스라는 것을 사용해서 만들어진 형태의 컴포넌트
◦
함수 컴포넌트
▪
모든 리액트 컴포넌트는 Pure 함수 같은 역할을 해야 함
▪
리액트의 컴포넌트는 일종의 함수
function Welcome(props) {
return <h1>안녕~!! {props.name} </h1>
}
JavaScript
복사
•
컴포넌트 이름
◦
컴포넌트 이름은 항상 대문자로 시작하기 (소문자 입력시 DOM 태그로 인식하기 때문)
▪
<div>, <span> ⇒ 컴포넌트
•
컴포넌트 합성
◦
여러 개 컴포넌트 합쳐서 하나의 컴포넌트를 만드는 것
◦
복잡한 화면을 여러 개의 컴포넌트로 나누어서 구현할 수 있음
•
컴포넌트 추출
◦
복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나누는 것
◦
큰 컴포넌트에서 일부를 추출해서 새로운 컴포넌트를 만드는 것
▪
컴포넌트가 작아질수록 해당 컴포넌트의 기능과 목적이 명확해지고, props도 단순해지기에
컴포넌트의 재사용성이 올라가고 동시에 개발 속도도 향상됨