React 란 ?
- 리액트란 페이스북에서 개발하고 관리하는 자바스크립트 라이브러리로 사용자 인터페이스를 구축하는데 근래에 주로 사용된다. 컴포넌트 라는 개념을 기반으로 프래그래밍 방식을 지향하며 대규모 애플리케이션을 프로그래밍하는데도 간결하고 효율적인 코드 작성이 가능하게 해준다.
- 일반적인 HTML은 변경된 부분만 업데이트 하지 않고 전체 페이지를 다시 그려주는데 리액트는 가상 DOM을 사용하여 변경된 부분만 업데이트 해주기 때문에 효율적인 업데이트가 가능하다.
React 주요 특징
- 컴포넌트 기반 : 컴포넌트란 UI의 기본 단위로 상태와 속성을 가지고 있어 이를 조합하여 사용자 인터페이스를 구축
- 가상 DOM : 리액트는 가상 DOM을 통해 데이터가 변경 될 때마다 실제 DOM을 직접 변경하는 대신 변화를 가상 DOM에 먼저 적용하고 실제 DOM과 가상 DOM을 비교하고 바뀌어야 할 부분을 감지하여 실제 DOM에 반영. 이 과정을 통해 브라우저의 렌더링 성능을 효과적으로 최적화 할 수 있습니다.
- 단방향 데이터 흐름 : 리액트는 데이터가 부모 컴포넌트로 부터 자식 컴포넌트로 props 를 통해 단방향으로 데이터의 흐름을 갖는다. 단방향으로 흐르는 데이터 구조 때문에 애플리케이션의 상태를 예측하게 하고 디버깅을 쉽게 합니다.
- JSX : JSX는 javascript 내부에 HTML 과 유사한 문법을 사용할 수 있게 해줍니다.
React 맛보기
- 컴퓨터의 시간을 나타내는 간단한 문법 실습해보기
- babel : 자바스크립트를 컴파일러로 자바스크립트의 문법을 사용하여 작성된 코드를 이전 버전의 자바스크립트 코드로 변환하여 최신 자바스크립트 문법과 이전 자바스크립트 문법이 동작하게 도와주는 도구
- render() 부분에 <h1></h1> <h2></h2>를 감싸는 <></> 가 있는데 이 빈 태그가 없으면 에러가 나기 때문에 감싸줘야한다. <div></div>로 감싸줘야 하지만 저렇게 아무것도 없는 태그로 감싸 줘도 에러가 나지 않음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
Time: new Date().toLocaleTimeString(),
};
}
// 컴포넌트가 생성되면 딱 1번 호출
componentDidMount() {
// 여기에는 되도록 쓰지말아야하지만 실습을 위해 한번 씀
setInterval(() => {
this.setState({ Time: new Date().toLocaleTimeString() });
}, 1000);
console.log("first run");
}
componentDidUpdate() {
console.log("update state");
}
render() {
return (
<>
<h1>computer time</h1>
<h2>time : {this.state.Time}</h2>
</>
);
}
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<Clock />);
</script>
</html>
728x90
'React' 카테고리의 다른 글
| [React] Redux와 OpenWeather (1) | 2023.09.14 |
|---|---|
| [React] react-router-dom을 알아보기 (1) | 2023.09.07 |
| [React] useState, useEffect를 활용한 달력 만들기 (1) | 2023.09.07 |
| [React] Babel과 webpack 알아보기 (0) | 2023.09.07 |