728x90
반응형
리액트
가상 DOM으로 랜더링, 실제 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠름
왜 리액트를 사용해야하는가?
UI 컴포넌트를 만들고 재사용하는데 매우 용이하며 만들어진 컴포넌트를 통해 사용자와 인터렉션을 하고 화면을 업데이트하는데 최적화되어있다.
// Javascript
let a = 0;
const root = document.getElementById("root");
const h1 = document.createElement("h1");
h1.setAttrivute("id", "h1");
h1.style.color = "blue";
h1.textContent = "Total clicks :0";
const button = document.createElement("button");
button.textContent = "Click me";
button.addEventListener("click", function() {
a = a + 1;
console.log(a);
});
const container = document.createElement("div");
container.appendChild(h1);
container.appendChild(button);
root.appendChild(container);// React
let a = 0;
const root = document.getElementById("root");
const h1 = React.creatElement("h1", {style: {color:"blue"}}, "Total clicks : 0");
const button = React.creatElement("button", {onClick () => {
a = a + 1;
console.log(a);
}}, "click me");
const container = React.createElement("div", null, [h1, button])
ReactDOM.render(container, root);위의 JS는 html, css, js를 통해야 하지만 리액트는 한방에 작성이 가능하다.
createElement 함수
이 함수를 사용하여 React element를 만들 수 있으며 React Element는 React에서 UI를 구성하는 데 사용되는 작은 조각.
const container = React.createElement("div", null, "hello");
첫 번째 인수는 생성할 요소의 타입이며 예를 들어 'div', 'p', 'h1', 'p' 등과 같은 HTML요소 타입
두 번째 인수는 요소의 속성을 지정해 주며 className, style, onClick 등과 같은 속성
세 번째 인수는 요소의 자식(children)을 지정, 요소 내부에 다른 요소나 텍스트를 포함시킬 수 있다.
리액트 쉽게 사용해 보기
React CDN은 개발 단계에서 사용하기 좋으며, 별도의 빌드 과정 없이 React 애플리캐이션을 빠르게 테스트하고 공유할 수 있습니다. 그러나 프로덕션 환경에서는 보다 성능이 우수한 빌드 도구를 사용하여 React 애플리 케이션을 번들링 하고 서비스하는 것이 좋다.
<!-- React CDN -->
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<!-- JS는 어플리케이션이 아주 Interactive 하도록 만들어주는 library -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<!-- DOM은 React element들을 HTML body에 둘 수 있도록 해준다 -->
<!-- Babel CDN (for JSX support) -->
<script src="https://unpkg.com/@babel/standalone@7.12.7/babel.min.js"></script>
<!-- babel은 JSX를 브라우저가 이해 할 수 있는 형태로 바꾸어 준다 -->
JSX(JS + XML)?
const element = <h1>hello world</h1>와 같은 형태로 우리가 만들고자 하는 컴포넌트 안에 들어가는 html요소들을 js안에서 실제 html의 모습과 동일하게 사용할 수 있도록 지원
<!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">
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<title>react</title>
</head>
<body>
<div id="root"></div>
<script>
const root = document.getElementById("root")
ReactDOM.render(React.createElement("h1", null, "hello!"),
root)
</script>
</body>
</html>
리액트 컴포넌트
React 앱은 컴포넌트로 만들어진다. 컴포넌트는 고유한 논리와 모양이 있는 UI(사용자 인터페이스)의 일부이며, 컴포넌트는 버튼만큼 작을 수 도 있고 전체 페이지만큼 클 수도 있다. React 컴포넌트는 마크업을 반환하는 JavaScript 함수이다.
function MyButton() {
return(
<button>I'm a button</button>
);
}
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</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">
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!-- babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>react</title>
</head>
<body>
<div id="root"></div>
<!-- babel을 쓰기 위해선 type을 넣어줘야한다. -->
<script type="text/babel">
const root = document.getElementById("root");
// 함수형 컨포넌트
function MyComponent(){
return React.createElement("h1", null, "함수형 컴포넌트");
}
function Greeting(props) {
return React.createElement("h2", null, `안녕하세요, ${props.name}!`);
}
ReactDOM.render(React.createElement("h1", null, "hello2!"), root);
ReactDOM.render(React.createElement(MyComponent), root);
ReactDOM.render(<MyComponent />, root);
ReactDOM.render(<Greeting name ={"홍길동"} />, root);
ReactDOM.render(React.createElement(Greeting, {name : "홍길성"}), root);
</script>
</body>
</html>
Counter JS를 React로 변경해 보기
<!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>CountUP</title>
</head>
<body>
<h2 id="counter">0</h2>
<div>
<button id="minus">-1</button>
<button id="plus">+1</button>
</div>
<script>
const counter = document.getElementById("counter");
const minus = document.getElementById("minus");
const puls = document.getElementById("plus");
function countUP(){
console.log("+1");
const current = parseInt(counter.innerText);
counter.innerText = current +1;
}
const countDown = () => {
console.log("-1");
const current = parseInt(counter.innerText);
counter.innerText = current - 1;
}
minus.addEventListener("click", countDown);
plus.addEventListener("click", countUP)
</script>
</body>
</html><!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">
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!-- babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>CountUP</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const root = document.getElementById("root");
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>{count}</p>
<button onClick={()=> setCount(count + 1)}> +1 </button>
<button onClick={()=> setCount(count - 1)}> -1 </button>
</div>
);
}
ReactDOM.render(<Counter />, root);
</script>
</body>
</html>
느낀 점
리액트 첫 강의를 들었는데 헷갈리는 부분이 아직 많은 건 사실이지만 다양한 실습을 통해서 발전할 것이라고 생각한다. 아무래도 다양한 실습이 코드 짜는데 확장성을 키워주는 것 같다. 그래서 좀 더 많은 예제 문제들이 있으면 좋겠다고 생각했다.
* 유데미 큐레이션 바로가기 : https://bit.ly/3ZpMIP7
* STARTERS 취업 부트캠프 공식 블로그 : https://blog.naver.com/udemy-wjtb
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
728x90
반응형
'10주완성 프로젝트 캠프' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 8일차 - 리액트 라우터 (0) | 2023.06.29 |
|---|---|
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 과제 (0) | 2023.06.26 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 5일차 - CSS (0) | 2023.06.20 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 4일차 - HTML (0) | 2023.06.20 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 3일차 - 서비스기획3 (0) | 2023.06.11 |
