React
동적 UI를 만들기 위한 자바스크립트 기반 라이브러리
React 특징
- 단방향 데이터 흐름
- Component 기반 구조
Component- 독립적 단위의 SW 모듈, React는 View를 여러 컴포넌트로 이루어짐 - Virtual DOM
Virtual DOM- 실제 DOM의 상태변경을 빠르게 처리, 기본 DOM의 조작에 의한 브라우저의 수많은 렌더링들을 Virtual DOM은 한번에 처리 - Props, State
Props- 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터, 자식에서 props 변경 불가능
State- 컴포넌트 내부에서 선언되고 값 변경
함수형 컴포넌트에서는useState로 사용 - JSX
자바스크립트 확장 문법, 하나의 파일에 js와 html 동시 작성가능
React 시작
//or npm
npx create-react-app {앱 이름}앱 이름에는 대문자 사용불가, 대시 사용
npm start로 프로젝트 실행
JSX
function App() {
return (
<div>
<h1>Hello React<h1/>
</div>
);
}JSX에서 최상위 요소는 형제가 없는 고유요소여야 하며, 반드시 부모 최상위 요소로 한번 감싸는 형태여야함(<>, </> 빈 태그로 감싸기 가능)
종료 태그 / 필수적으로 사용해야 함
JSX Style, attribute, js사용
function App() {
const name = '홍길동';
const flag = true;
let text = "";
const styles = {
backgroundColor : 'yellow';
color : 'blue';
fontSize : '48px';
};
if(flag) text = "true 입니다";
else text = "false 입니다";
return (
<div style={ backgroundColor : 'blue'}>
<h1 className="class">Hello React<h1/>
<div style={styles}>{name}</div>
<div>{text}</div>
{ flag ? (<h2>true입니다.</h2>) : (<h2>false입니다.</h2>) };
</div>
);
}Style을 지정할 때나, 태그의 속성값을 사용할 경우 모두 camelCase 이용
Style 적용은 문자열형태가 아닌 객체 형태로 사용
JSX 안에서 js문법 사용할 경우 { }로 감싸 사용
연산자 사용 시 연산 후 변수에 담아 처리
조건문(if), 반복문(for) 사용 불가, 삼항연산자 사용
map, filter, 단축평가
map
인자로 넘겨지는 callback 함수를 실행한 결과를 가지고 새로운 배열 생성, 반복문처럼 사용 가능
기본 문법
array.map((value, index, array), [this.Arg])
첫번째 인자 - callbackFunction으로 새로운 배열의 요소 생성
두번째 인자 - callbackFunction에서 사용할 this 객체, 생략 가능
Component에 map함수 적용
function App() {
const list = ['h', 'e', 'l', 'l', 'o'];
return (
<>
<ul>
{list.map(value, idx)=> {
return <li key={idx}>{value}</li>;
})};
</ul>
</>
);
}value 로 배열의 값 접근
map으로 컴포넌트 생성 시, key 사용 권장 -> 기존 요소와 업데이트 요소 비교하는데 사용
filter
인자인 callback 함수의 조건을 통과하는 요소들만 모아 새로운 배열을 생성
let animals = ['dog', 'cat', 'rabbit'];
let filterAnimals = animals.filter((animal)=> { return animal.length > 3 });
//result : ['rabbit']
let filterAnimals2 = animals.filter((word)=> {
return word.includes('a');
});
//result : ['cat', 'rabbit'];단축평가
논리 연산자 사용하여 조건에 따라 값을 결정하거나 코드 실행
&& 연산자
const result = false && 'Hello';
//result : false
const name = '홍길동';
const result2 = name && 'Hello';
//result2 : HelloA && B에서, A가 false일 경우, 바로 A값 반환, A가 true일 경우, B값 확인 후 반환
|| 연산자
const name1 = '홍길동';
const name2 = null;
const result = name1 || name2;
//result : 홍길동
const result2 = true || 'hello';
//result2 : trueA || B에서, A가 false일 경우 B값 확인 후 반환, A가 true일 경우 바로 A 반환
React Component
React 앱을 이루는 가장 최소의 단위
MVC 패턴의 View를 독립적으로 구성해 재사용할 수 있고, 컴포넌트 안에 새로운 컴포넌트 생성 가능
props 데이터와 state 상태에 따라 DOM Node 호출
UI를 재사용 가능한 여러 컴포넌트들로 나누고, 개별적으로 작성해 불러옴
클래스형 컴포넌트
//ClassComponent.js
import {Component} from "react";
class CalssComponent extends Component {
render() {
const classes = 'kdt';
return (
<>
<div>{ classes == 'kdt' ? 'hello' : 'what?' }</div>
</>
);
}
export default ClassComponent;
//App.js
import ClassComponent from './ClassComponent';
function App() {
return (
<>
<ClassComponent/>
</>
);
}
export default App;
Component를 상속받아 사용
render() 함수 필수로 정의해야 함
함수형 컴포넌트
function FunctionComponent() {
const classes = 'kdt';
return (
<>
<div>{ classes == 'kdt' ? 'hello' : 'what?' }</div>
</>
);
};
//or export default function FunctionComponent()..
export default FunctionComponent;컴포넌트 정의 후 export
Props
컴포넌트의 속성을 정의할 때 사용하는 요소, 컴포넌트간 값을 전달하는 수단(단방향 데이터 흐름)
클래스형 컴포넌트에서의 Props 사용
//App.js
import ClassComponent from './ClassComponent';
function App() {
return (
<>
<ClassComponent title='제목' content='내용'></ClassComponent>
</>
);
};
export default App;
//ClassComponent.js
import { Component } from 'react';
import PropTypes from "prop-types";
class ClassComponent extends Component {
render() {
return (
<h1>제목 : {this.props.title}, 내용 : {this.props.content}</h1>
);
};
static defaultProps = { title : '타이틀', conent : '내용' };
static propTypes = { title : PropTypes.string, content : PropTypes.string };
};
//or static
//ClassComponent.defaultProps = { title : '타이틀', conent : '내용' };
//ClassComponent.propTypes = { title : PropTypes.string, content : PropTypes.string };
export default ClassComponent;클래스형 컴포넌트에서는 this.props로 값을 접근
전달된 값이 없을 경우를 위해 defaultProps와 PropTypes 사용해 처리(클래스 내에 static으로 선언하거나 클래스 밖에 필드처럼 선언)
함수형 컴포넌트에서 props 사용
//App.js
import FunctionComponent from './FunctionComponent';
function App() {
return (
<>
<FunctionComponent title='제목' content='내용'>자식 내용</FunctionComponent>
</>
);
};
export default App;
//FunctionComponent.js
import PropTypes from "prop-types";
function FunctionComponent(props) {
return (
<h1>제목 : {props.title}, 내용 : {props.content}</h1>
<h2>작성자 : {props.children}</h2>
);
};
FunctionComponent.defaultProps = { title : '타이틀', conent : '내용' };
FunctionComponent.propTypes = { title : PropTypes.string, content : PropTypes.string };함수형 컴포넌트는 컴포넌트 함수 인자로 접근
컴포넌트 호출 시 태그 내부에 작성한 문자열을 children을 통해 접근 가능
