반응형
가상 DOM
가상DOM이란 ?
DOM의 상태를 메모리위에 올려두고 DOM변경이 있을 때만 해당 변경을 반영한다.
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<!--(1)-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
</html><body>
<div id = "root"></div>
<script type="text/babel">
setInterval(showClock, 1000)
function showClock() {
const d = new Date()
const hour = d.getHours()
const min =d.getMinutes()
const sec = d.getSeconds();
const elem = <div> {hour} : {min} : {sec} </div>
const root = document.getElementById('root')
ReactDOM.render(elem,root);
}
</script>
</body>Dom의 일부만 변경됨
전체를 변경하는 것이 아닌 변경할 부분을 찾아 일부만 변경한다. 따라서 화면 처리속도가 비약적으로 빠르다.
컴포넌트 만들기(기초)
컴포넌트는 특정 기능을 가진 범용적인 부품을 나타내는 용어. 범용적인 컴포넌트를 만들어 재사용 가능하게 한다.
리액트를 이용해 컴포넌트를 만드는과정
JSX를 반환하는 함수를 정의하기만 하면 된다.
ex> Hello 라는 컴포넌트를 정의한다. 매개변수로 전달받은 props의 props.type을 <h1> 태그로 감싸서 출력하는 예
function Hello(props){
// ..중간에 필요한 기능을 넣어도 된다.
return <h1>{props.type}</h1>
}한번 이렇게 컴포넌트를 정의하면 JSX태그처럼 사용할 수 있다.
//Hello컴포넌트 사용하기
const dom = <div>
<Hello type = "good morning" />
<Hello type = "good afternoon" />
<Hello type = "good evening" />
</div>
ReactDOM.render(dom.document.ElementById('root'))
요래된다.
이 props.type , props.from 으로 포인트를 확장 할 수 있다. 이때 첫번째 매개변수는 객체 자료형이며, 해당 객체의 프로퍼티가 태그의 속성을 나타낸다.
<Hello type = "hello" from = "jieun" />
Hello({"type" : "hello", "from" : "jieun"})
//위 아래가 같은 의미 조금 더 복잡한 컴포넌트의 경우
복잡한 컴포넌트를 정의할 때 함수 하나만으로는 어려울때가 있다. 리액트는 복잡한 타입의 컴포넌트를 정의할때 ES5에 추가된 class구문을 사용
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<!--(1)-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
</html><body>
<div id = "root"></div>
<script type="text/babel">
// 클래스로 컴포넌트를 정의
class Hello extends React.Component {
render(){
return <h1>{this.props.type}</h1>
}
}
// function Hello(props){
// return <h1>{props.type}</h1>
// }
const dom = <div>
<Hello type = "good morning" />
<Hello type = "good afternoon" />
<Hello type = "good evening" />
</div>
ReactDOM.render(dom,document.getElementById("root"))
</script>
</body>
- React.Component라는 리액트의 기본적인 컴포넌트 클래스를 상속받는 부분이 제일 중요한 부분!
- render()메서드를 정의했는데, render() 메서드의 반환값이 컴포넌트의 출력내용이된다.
- 컴포넌트를 사용할때의 태그 요소는 this.props라는 객체 자료형에 들어있다. (this.props.type)
리스트 컴포넌트 만들기
ui li요소를 사용해 리스트를 표현한다.
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<!--(1)-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
</html><body>
<div id = "root"></div>
<script type="text/babel">
class RList extends React.Component {
render() {
const items = this.props.items.split(",")
const itemsObj = items.map(
(e) => {
return <li>{e}</li>
})
let title = this.props.title
if(!title) title = "LIST"
return (<div>
<h3> {title} </h3>
<ul> {itemsObj} </ul>
</div>)
}
}
const dom = <RList title = "Colors" items = "Red,Green,Blue,White" />
ReactDOM.render( dom,document.getElementById("root"))
</script>
</body>
이렇게 쉽게 목록을 만들 수있음
화살표 함수로 컴포넌트 정의
const Test = (props) => (
<div>
<h1>{props.title}</h1>
<div>
)반응형
'개발(라이브러리,프레임워크) > react.js & react native' 카테고리의 다른 글
| 자동빌드, 웹팩 (0) | 2021.05.16 |
|---|---|
| 컴포넌트, 이벤트 (0) | 2021.05.15 |
| 리액트와 JSX의 관계 (0) | 2021.05.13 |
| 리액트입문 (0) | 2021.04.26 |
| Node.js 환경설정 (0) | 2021.04.25 |
