(8) 컴포넌트 중첩
다시 VScode로 돌아와서
콘솔에 create-react-app myapp2 로 리액트 어플리케이션을 만들어 줍니다.
create-react-app myapp2
1) App2.js : render()해서 내보낼 클래스를 만들어줍니다.
import React from 'react';
class App2 extends React.Component{
render(){
return(
<div>
<h1>컴포넌트 중첩 연습입니다.</h1>
</div>
)
}
}
export default App2; 2) index.js : 컴포넌트들을 결합시켜 줍니다.
component를 import 시켜주고,
ReactDOM.render(1.화면에 부착시킬컴포넌트명 2.부착시킬 위치를 지정)를 통해서 랜더링 해줍니다.
[1] 매개변수를 전달하지 않은 상태의 방식(부모-자식 사이에서)입니다.
import App from './components/App';//~.vue
import App2 from './components/App2';//export 누락되면 importX
//render(1.화면에 부착시킬컴포넌트명 2.부착시킬 위치를 지정)
// 1) 매개변수를 전달하지 않은 상태의 방식(부모-자식 사이에서)
ReactDOM.render(<App />,document.getElementById('root'));
ReactDOM.render(<App2 />,document.getElementById('root2'));3) public/index.html : 부착시킬 위치를 잡아줍니다.
: 이미 생성되 있으므로 패스
4) 모듈화
공통 관심 클래스를 작성
자주 사용이 되거나 반복적인 구문을 가진 클래스를 따로 파일로 만들어서 불러오는 방법입니다.ex) 화면 디자인상의 수정부분이 많아지면 파일로 분리 : 작업유리(유지보수에 유리)
5) 모듈화를 위해 Header.js / Content.js 를 분리해서 만들어줍니다. (App2.js에 같이 만드는 부분은 생략합니다)
Header.js
import React from 'react';
class Header extends React.Component{
render(){
return(<h1>Header</h1>)
}
}
export default Header;Content.js
import React from 'react';
export default class Content extends React.Component{
render(){
return(
<div>
<h1>Content</h1>
<h2>컴포넌트 중첩</h2>
</div>
)
}
}
//export default Content; > 클래스 선언부에 export default를 해주었기 때문에 제외합니다.6) 중첩된 태그가 들어있는 js 를 출력해봅니다.
App2.js 의 render() 에 컴포넌트를 추가합니다.
render(){
return(
<div>
<Header/>
<h1>컴포넌트 중첩 연습입니다.</h1>
<Content/>
</div>
)
}
(9) props를 알아봅시다 - 1
중요합니다. 매우
props
1) 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용됩니다.
: 상수느낌이 납니다.2) parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용됩니다.
: 화면에 데이터를 출력할 목적 , 매개변수를 전달할 때 사용합니다.3) 컴포넌트에서 immutable (변하지 않는) 데이터가 필요 할 땐,
render() 메소드의 내부에 안에 { this.props.propsName } 형식으로 넣어줍니다.4) 컴포넌트를 사용 할 때, < > 괄호 안에 propsName="value" 를 넣어 값을 설정합니다.
1)index.js 에 랜더를 추가합니다.
단, 매개변수를 전달받습니다.
[2] 매개변수를 전달받는 render를 추가합니다.
형식 ) <자식태그명 매개변수명="전달할 값" 매개변수명2="값2",,,,/>
- 매개변수는 한개이상 전달이 가능하며, 갯수는 개발자 마음입니다.
- (문자열,숫자,함수,객체) 다 가능합니다.
※ App 과 App2 에 각각 headerTitle , ContentTitle 이라는 변수를 전달해줍니다.
※ App 에는 headerTitle을 전달해서, 그 App을 root 에 출력하고
※ App2 에는 contentTitle과 contentBody을 전달해서, root2에 출력하도록 합니다.
ReactDOM.render(<App headerTitle="전달연습" />,
document.getElementById('root'));
ReactDOM.render(<App2 contentTitle="전달연습2"
contentBody="부모로부터 자식에게 전달" />,
document.getElementById('root2'));
2) App 과 App2에서 각각 이 매개변수를 출력해봅니다.
부모입장에서 그 props 자체를 이용하기 위해서는 this 를 사용합니다.
형식 ) {this.props.전달받은 매개변수명}
App.js에서는
render(){
return(
<div>
<h1>{this.props.headerTitle}</h1>
</div>
) App2.js에서는
render(){
return (
<div>
<h1>컴포넌트 중첩 연습</h1>
부모입장에서 그대로 출력:{this.props.contentTitle}
</div>
)
3) 이번엔 App2에서 Header 와 Content로 전달을 해봅니다.
App2.js 에서 각 컴포넌트를 추가하고 매개변수를 전달합니다.
render(){
return(
<div>
<h1>App2</h1>
<Header title={this.props.contentTitle}/>
App2 부모입장에서 그대로 출력:{this.props.contentTitle}
<Content body={this.props.contentBody} />
</div>
)
}4) 그럼 Header 와 Content 에서도 잘 받았는지 출력을 해봅니다.
Header :
<h1>{this.props.title}</h1>
Content :<h1>{this.props.body}</h1>
각각의 매개변수들을 {this.props.매개변수} 형식을 이용해 표현해줍니다.
5) 그런데, 만약! 만약에! 전달과정에 문제가 생겨 전달을 받지 못했을 경우엔?
: 이미 Header 나 Content에도 {this.props.title}이라던가 {this.props.body}를 써놨는데, 데이터가 없다면 랜더링 과정에서 오류가 발생할 것이다.
※ 그렇다면 당연히 default 값을 설정해 주는게 맞을 것이다. 해보자
기본값을 설정 할 땐, 컴포넌트 클래스 하단에
className.defaultProps = { propName: value } 를 삽입하면 됩니다.
App2의 하단에 defaultProps 를 추가해줍니다.
App2.defaultProps={
contentTitle:5,
contentBody:undefined
}6) 그럼 이번엔, 매개변수가 전달이 되긴 했는데, 맞지 않은 타입이 온다면?
propType 객체를 설정해서, 맞지 않으면 오류메세지를 전달하도록 하면 됩니다.
또한, 이 propType을 통해서 필수 props를 지정할 수 있습니다.
형식) 전달받은 매개변수명 : title:PropTypes.자료형
주의할 부분 !! 대소문자!!
: Class명.propTypes = { 로 시작하고
: 매개변수명.PropTypes.자료형~
Header와 Content의 하단에 propTypes 를 추가해줍니다.
Content.propTypes = {
body:PropTypes.string.isRequired // 필수로 전달받아야 되는 옵션
}
Header.propTypes={
title:PropTypes.string // React.PropTypes.자료형 <<- 옛날 버전 최근엔 React를 제거한다.
}
