지난 번에 이어서 Class Component 에 대해 계속 알아보자.
우선 다시 한 번 Class Component를 이용해 html element를 생성해보자.
1. Class component를 이용한 html 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">
<title>Document</title>
<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>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return (
React.createElement(
'div',
{
value:1,
name: 'lsj',
class: 'header'
},
'hello'
)
)
}
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
</body>
</html>
React.createElement의 인자는 순서대로 '생성할 element', '그 element의 attribute', 'element의 value' 이다.
이 html을 브라우저로 열어보면 hello라는 텍스트를 가지고
지정한 value, name, class를 가진 div가 생성되었음을 볼 수 있다.
가독성을 위해 다음과 같이 변수를 선언해 React.createElement를 밖으로 빼주자.
<!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@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>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
const newEle = React.createElement(
'div',
{
value:1,
name:'lsj',
class:'header'
},
'hello'
)
return (
<div>
{newEle}
</div>
)
}
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
</body>
</html>
이제 input element를 방금 만든 div안에 넣어서 생성해주는 작업을 다시 해보자.
우선 Input을 class component를 이용해 생성한 후, 그걸 App 안에 넣어주면 된다.
<!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@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>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Input extends React.Component {
render() {
return(
<input type='text'/>
)
}
}
// class component로 Input 생성
class App extends React.Component {
render() {
const newEle = React.createElement(
'div',
{
value:1,
name:'lsj',
class:'header'
},
'hello'
)
return (
<div>
{newEle}
<Input/>
</div>
)
}
}
// {newEle} 아래에 <Input/>을 추가한다.
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
</body>
</html>
여기까지 성공했다면 브라우저의 렌더링과 html 요소 배치는 다음과 같다.
2. 다른 class component로의 데이터 전달
현재 우리는 input element와 div element를 생성한 상태인데, <App/>은 input과 div를 모두를 감싸는
div까지 포함한 상태이다.
즉, html에 대응시켜 생각해보면 <App/>이 <Input/>의 parent element라고 볼 수 있다.
이런 관계에 있는 두 class component에서 데이터를 주고 받는 방식에 대해 알아보자.
여기서는 <App/>에서 <Input/>으로 데이터를 전달해볼 것이다.
2.1 하위 class 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">
<title>Document</title>
<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>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Input extends React.Component {
render() {
return(
<input type='text'/>
)
}
}
class App extends React.Component {
render() {
const newEle = React.createElement(
'div',
{
value:1,
name:'lsj',
class:'header'
},
'hello'
)
return (
<div>
{newEle}
<Input
value={1},
name={lsj},
age={29}
/>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
</body>
</html>이렇게 <Input/> 꺽쇠 괄호안에 주고 싶은 attribute를 쭉 써주면
우선 <Input/> 컴포넌트로 데이터를 전달하는 것 까지가 완료 된 것이다.
여기까지 하고 브라우저에서 열어보면 input에 아직 아무런 attribute도 추가되지 않았을 것이다.
아직 <Input/> Component에서 데이터를 받아주는 작업을 하지 않아서 그렇다.
2.2 전달받은 데이터 수신
다음과 같이 Input component를 수정해보자.
<!-- 전략 -->
<script type=text/babel>
class Input extends React.Component {
render() {
return(
<input type='text' value={this.props.value}/>
)
}
}
class App extends React.Component {
render() {
const newEle = React.createElement(
'div',
{
value:1,
name:'lsj',
class:'header'
},
'hello'
)
return (
<div>
{newEle}
<Input
value={1}
name={'lsj'}
age={29}
/>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
</script>
<Input/> 의 type 다음에 저렇게 {this.props.value} 라고 써서 전송된 데이터를 받을 수 있다.
여기서는 보내준 데이터 중 value만을 받아보았다. name이나 age를 받고 싶으면
value대신 해당하는 key값을 써주면 된다.
여러 개 attribute를 주고 싶다면 html에서 한 것처럼 attribute와 그 value값을 쭉 써주면 된다.
2.3 전달받은 데이터 활용
전달 받은 데이터를 앞에서처럼 attribute로 사용할 수도 있지만 그냥 text로 뿌려준다거나 등등
다른 방법으로 활용하는 법을 알아보자.
이는 server에서 req, res가 데이터를 주고 받은 방식과 동일하게 구조 분해 할당을 이용한다.
다음과 같이 Input component를 수정해보자.
class Input extends React.Component {
render() {
const { name } = this.props
return (
<div className='wrapper'>
<input type='text' value={this.props.value}/>
<br/>
{name}
</div>
)
}
}
<App/>에서 전달받은 데이터중 name을 빼내서 그 값을 텍스트로 렌더링 해준다.
각 element들을 묶기 위해 div을 사용헀고, className은 html의 class attribute와 동일하다.
이렇게 한 후 브라우저에서 불러오면 <App/>에서 보낸 name의 value가 화면에 렌더링됨을 확인할 수 있다.
'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 #1 Intro (0) | 2022.04.12 |