1. intro
React에 대해 알아보자.
react는 기본적으로 SPA, single page app을 구현하기 위해 사용하는 프레임워크이다.
기존 프론트앤드 개발을 훨씬 쉽게 만들어 주는데 그 의의가 있다.
기존까지 배워왔던 js는 데이터가 변할 때마다 렌더링을 변형해야 했다.
이 때 데이터의 변화에 대응해 어떤 변화를 (사용자에게 보이는) 줄지를 생각하는 과정이 필요했는데,
facebook의 개발자들은 그냥 기존 뷰를 제거하고 처음부터 새로 렌더링 하는 방식을 선택했다.
이를 최적화해 최대한의 성능을 뽑아낼 수 있도록 한 것이 react이다.
1. react
react를 이용해 간단한 버튼을 만들어보자.
우선 head 부분에 react에 대한 script를 추가해주고 코드를 작성한다. (axios를 사용한 방식과 동일)
<!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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> // react
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 이 영억 안에 element를 생성한다. -->
</div>
<script type="text/babel">
React.createElement('button', 'null', 'press this')
</script>
</body>
</html>react로 careateElement method를 사용하기 위해선 3가지 인자값이 필요하다.
순서대로 element 종류, attribute(없으면 null), element가 가질 value이다.
위와 같이 코드를 작성하고 브라우저에서 불러와보자.
2. react-DOM
좀 전에 코드를 작성하고 브라우저로 열어봐도 아무것도 나오지 않았을 것이다.
이는 react를 이용해 야기한 element의 변화를 브라우저가 감지하지 못해서 그런 것이다.
이런 react로 인한 element의 변화를 감지하게 해주는 알고리즘이 바로 reactDOM 이다.
이 ReactDOM은 사용 시 2개의 인자값을 가지는데, 순서대로 넣을 내용, 넣을 위치를 의미한다.
내가 방금 사용한 button 생성 코드를 div (id=root)에 넣고 싶다면 그 둘을 인자값으로 지정하면 된다.
reactDOM에 대한 script를 head에 추가하고 body > script의 코드를 다음과 같이 수정하자.
예전에 js에서 서버를 구동할 때 listen 메소드를 사용한 것처럼 render 메소드와 함께 한 번만 사용해주면 된다.
<!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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> // react
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> //reactDOM
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 이 영억 안에 element를 생성한다. -->
</div>
<script type="text/babel">
// type은 javascript대신 babel을 써준다.
ReactDOM.render(
React.createElement('button', null, 'press this'),
document.querySelector('#root')
)
</script>
</body>
</html>
이렇게 코드를 수정하고 다시 브라우저로 열어보면 버튼 element가 생성되었음을 확인할 수 있을 것이다.
여기서 버튼에 class 등의 attribute를 주고 싶다면 다음과 같이 객체 형태로 준다.
슬슬 코드가 복잡해지므로 첫 번째 인자만 변수로 만들어 밖으로 빼내자.
<!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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 이 영억 안에 element를 생성한다. -->
</div>
<script type="text/babel">
// type은 javascript대신 babel을 써준다.
const btn = React.createElement('button', {id:'lsj', class='justbutton'}, 'press this')
ReactDOM.render(
btn,
document.querySelector('#root')
)
</script>
</body>
</html>
2. JSX
JSX는 js영역으로 HTML element들을 가져오는 역할을 한다.
즉 우리가 html 문서를 작성할 때 element를 만드는 것과 동일한 방식으로 script 영역에서
react로 html element를 생성할 수 있게 해준다.
이를 구체적으로 보기 위해서는 바로 아래 babel과 함께 사용되어야 한다.
3. babel
쉽게 말하면 언어 변환기라고 보면 된다. 이를 통해 react를 일반 브라우저, js 영역에서 사용할 수 있다.
babel 문법을 따르면 우리가 html element를 타이핑하는 것과 동일한 방식으로 하면 알아서
해석을 통해 리액트 쪽에서 해석할 수 있도록 해준다.
좀 요약해 말하자면 JSX를 js로 번역해주므로 babel이 있어야 JSX를 사용해 좀 더 편하게
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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> // babel script 추가
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 이 영억 안에 element를 생성한다. -->
</div>
<script type="text/babel">
// type은 javascript대신 babel을 써준다.
const id='lifereset'
const btn = <button id={id}>press this!</button>
// html element를 생성할 때와 동일한 방식으로 타이핑 할 수 있다.
// 변수를 attribute의 값으로 넣고 싶다면 중괄호 안에 넣어주면 된다.
ReactDOM.render(
btn,
document.querySelector('#root')
)
</script>
</body>
</html>
html element를 사용한 방식과 동일한 방식으로 btn 변수를 선언할 수 있다.
변수에 attribute를 넣고 싶다면 마찬가지로 동일하게 써주거나 따로 변수를 선언해 중괄호 안에 넣어주면 된다.
2. 컴포넌트
Component는 react에서 특정 부분의 모양, 작동 방식을 정하는 선언체이다.
클래스, 함수형 component가 있는데 요즘은 거의 함수형 컴포넌트를 사용한다.
그렇다고 클래스형을 몰라서는 안된다. 이미 많은 코드들이 이를 이용해 작성되었기 때문.
우선 클래스 컴포넌트를 사용하는 법에 대해 먼저 배우고 이에 익숙해지는 과정을 거쳐야 한다.
<!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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> // react
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> //reactDOM
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> // babel
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 이 영억 안에 element를 생성한다. -->
</div>
<script type="text/babel">
// type은 javascript대신 babel을 써준다.
// const id ='classComp'
// const btn = <button id={id}>press this</button>
class App extends React.Component {
render() {
return (
<button> 클래스 컴포넌트 버튼 </button>
)
}
}
// class component를 다음과 같은 형식으로 선언
// App이 아닌 다른 이름을 써도 상관없다.
ReactDOM.render(
<App/>, // btn을 </App>로 대체
document.querySelector('#root')
)
</script>
</body>
</html>
여기까지 하고 브라우저로 열어보면 버튼이 생성되었음을 확인할 수 있다.
이렇게 컴포넌트를 선언하는데는 몇 가지 조건이 있는데,
첫 번째로 컴포넌트에 여러 개의 요소가 있다면 반드시 이들 모두를 감싸는
공통된 parent element를 넣어줘야 한다.
<!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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> // react
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> //reactDOM
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> // babel
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 이 영억 안에 element를 생성한다. -->
</div>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<button> 클래스 컴포넌트 버튼 </button>
<button> 클래스 컴포넌트 버튼2 </button>
)
}
}
ReactDOM.render(
<App/>, // btn을 </App>로 대체
document.querySelector('#root')
)
</script>
</body>
</html>
이런 컴포넌트는 동작하지 않는다. 반드시 두 버튼을 하나로 묶어줄 parent element가 필요하다.
다음과 같이 수정해주면 정상적으로 브라우저가 불러올 수 있게 된다.
<!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 crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> // react
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> //reactDOM
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> // babel
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 이 영억 안에 element를 생성한다. -->
</div>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div>
<button> 클래스 컴포넌트 버튼 </button>
<button> 클래스 컴포넌트 버튼2 </button>
</div>
)
)
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
</body>
</html>
div 요소를 추가하는 것이 싫다면 다음과 같이 가상 요소를 활용하는 것도 유효한 방법이다.
(이는 element의 추가 없이 텍스트만을 삽입하고 싶을때도 사용할 수 있다.)
<!DOCTYPE html>
// 중략
<script type="text/babel">
class App extends React.Component {
render() {
return (
<>
<button> 클래스 컴포넌트 버튼 </button>
<button> 클래스 컴포넌트 버튼2 </button>
</>
)
)
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
</body>
</html>
이 클래스 컴포넌트 선언을 약간 응용하자면 함수 안에서 함수를 사용한 것처럼
컴포넌트 안에 컴포넌트를 넣을 수도 있다.
<!DOCTYPE html>
//중략
<script type="text/babel">
class Hello extends React.Component {
render() {
return(
<>
Hello
</>
)
}
}
class World extends React.Component {
render() {
return (
<div>
world
</div>
)
}
}
class App extends React.Component {
render() {
return (
<div>
<Hello /> <World/>
</div>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
</script>
</body>
</html>
'React' 카테고리의 다른 글
| #6 Styling (0) | 2022.04.22 |
|---|---|
| #5 Webpack (0) | 2022.04.22 |
| #4 tictectoe 게임 만들기 (0) | 2022.04.17 |
| React #3 Class Component - data 변화 인식 (0) | 2022.04.13 |
| React #2 Class Component (0) | 2022.04.13 |