MyComponent
컴포넌트 생성 코드import React,{Component} from "react";
class MyComponent extends Component{
render(){
return(
<div>
나의새롭고 멋진 컴포넌트
</div>
)
}
}
export default MyComponent;
export default MyComponent
: 다른 파일에서 해당 파일 import하면, MyComponent 클래스 불러옴
App
컴포넌트에서 MyComponent
컴포넌트 불러오기import React,{Component} from "react";
import MyComponent from './MyComponent';
{/**MyComponent 파일에서 불러오기 */}
class App extends Component{
render(){
return (
<MyComponent/>
)
}
}
export default App;
출력 결과 :
App 컴포넌트가 MyComponent 컴포넌트 불러와 사용
props를 rendering 할 때 JSX 내부 {}
사용
MyComponent
컴포넌트에서 name
의 props rendering 하도록 설정import React,{Component} from "react";
class MyComponent extends Component{
render(){
return(
<div>
안녕하세요.제 이름은 {this.props.name}입니다.
</div>
)
}
}
export default MyComponent;
MyComponent
컴포넌트의 name
속성값 설정
import './App.css';
import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}
class App extends Component{
render(){
return (
<MyComponent name="react"/>
)
}
}
export default App;
MyComponent에서의 name
props를 기져와 다른 클래스에서 사용함.
출력 결과 :
name
에 할당된 값이 없는 경우import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}
class App extends Component{
render(){
return (
<MyComponent />
)
}
}
export default App;
컴포넌트 가져와 랜더링해 보였던 부분이 그냥 공백으로 남겨짐
defaultProps
: props 값을 지정하지 않은 경우에 따른 기본값 설정
//App.js
import './App.css';
import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}
class App extends Component{
static defaultProps={
name:"기본 이름"
}
render(){
return (
<MyComponent />
)
}
}
export default App;
//MyComponent.js
import React,{Component} from "react";
class MyComponent extends Component{
render(){
return(
<div>
안녕하세요.제 이름은 {this.props.name}입니다.
</div>
)
}
}
export default MyComponent;
.defaultProps
이용//App.js 파일
import './App.css';
import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}
class App extends Component{
render(){
return (
<MyComponent />
)
}
}
export default App;
//MyComponent 파일
import React,{Component} from "react";
class MyComponent extends Component{
render(){
return(
<div>
안녕하세요.제 이름은 {this.props.name}입니다.
</div>
)
}
}
MyComponent.defaultProps={
name : '기본 이름'
}
export default MyComponent;
내부에서 설정하는 것이 코드가 더 깔끔함
//MyComponent.js 파일
import React,{Component} from "react";
import PropTypes from 'prop-types';
class MyComponent extends Component{
render(){
return(
<div>
안녕하세요.제 이름은 {this.props.name}입니다.
</div>
)
}
}
/*클래스 밖에서*/
MyComponent.propTypes={
name : PropTypes.string
/*name props 타입을 문자열로 설정*/
}
export default MyComponent;
//App.js 파일
import './App.css';
import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}
class App extends Component{
static defaultProps={
name:"기본 이름"
}
render(){
return (
<MyComponent />
)
}
}
export default App;
//MyComponent.js
import React,{Component} from "react";
import PropTypes from 'prop-types';
class MyComponent extends Component{
//클래스 내부
static defaultProps={
//name props 기본값 설정
name:"기본 이름"
}
static propTypes={
name : PropTypes.string
//name의 props type을 문자열로 설정
}
render(){
return(
<div>
안녕하세요.제 이름은 {this.props.name}입니다.
</div>
)
}
}
export default MyComponent;
//App.js
import './App.css';
import React,{Component} from "react";
import MyComponent from './MyComponent'; {/**MyComponent 파일에서 불러오기 */}
class App extends Component{
render(){
return (
<MyComponent />
)
}
}
export default App;
Component 검증 해보기
name
props로 숫자 3 설정 : 오류 발생
<MyComponent name={3}/>
문자열 외 타입 값을 컴포넌트에 전달시 {}
필수
name
props로 문자열 "react" 설정 : 성공
<MyComponent name="react"/>
isRequired
이용age
를 필수 prop로 설정//MyComponent.js
import React,{Component} from "react";
import PropTypes from 'prop-types';
class MyComponent extends Component{
//클래스 내부
static defaultProps={
//name props 기본값 설정
name:"기본 이름"
}
static propTypes={
name : PropTypes.string,
//name의 props type을 문자열로 설정
age : PropTypes.number.isRequired
//필수적 & 숫자 여야함
}
render(){
return(
<div>
<p>안녕하세요.제 이름은 {this.props.name}입니다.</p>
<p>저는 {this.props.age}살 입니다.</p>
</div>
)
}
}
export default MyComponent;
랜더링은 되지만 콘솔창에서 age
의 값이 설정되어 있지 않다고 경고 메세지 출력됨
age
컴포넌트의 props 값 설정<MyComponent name="React" age={4}>
배열 | 참, 거짓 | 함수 | 숫자 | 객체 | 문자열 | ES6의 심벌 개체 | 리액트 요소 |
---|---|---|---|---|---|---|---|
array | bool | func | number | object | string | symbol | element |
랜더링 가능한 것 (숫자, 문자열, element, 이로 구성된 배열) | 특정 클래스의 인스턴스 | 아무 종류 |
---|---|---|
node | instanceOf(Myclass) | any |
주어진 배열 요소 중 값 하나 | 주어진 배열 안의 종류 중 하나 | 주어진 종류로 구성된 배열 | 주어진 종류의 값을 가진 객체 | 주어진 스키마를 가진 객체 |
---|---|---|---|---|
oneOf(["Male","Female"]) | oneOfType([React.PropTypes.string,React.ProTypes.number]) | arrayOf(React.PropTypes.number) | objectOf(React.PropTypes.number) | shape({name : React.PropsTypes.string, age : React.PropsTypes.number}) |
defaultProps
와propsTypes
는 필수적이지 않지만 큰 규모의 프로젝트나 개발자 협업 시 사용하면 해당 component에 어떤 props가 필요한지 쉽게 알 수 있음
constructor()
constructor
이용해 state 초기값 설정class MyComponent extends Component{
(...)
constructor(props){
super(props);
}
render(){
(...)
}
}
class MyComponent extends Component{
(...)
constructor(props){
super(props);
this.state={
number:0
}
}
(...)
}
render(){
return(
<div>
<p>안녕하세요.제 이름은 {this.props.name}입니다.</p>
<p>저는 {this.props.age}살 입니다.</p>
<p>숫자 : {this.state.number}</p>
</div>
)
}
setState()
this.setState({
수정할 필드 이름 : 값,
수정할 또 다른 필드 이름 : 값
});
render(){
return(
<div>
<p>안녕하세요.제 이름은 {this.props.name}입니다.</p>
<p>저는 {this.props.age}살 입니다.</p>
<p>숫자 : {this.state.number}</p>
<button onClick={()=>
this.setState({
/*버튼 누르면 this.setState() 실행하는 함수 실행됨*/
number : this.state.number+1
})
}>
더하기
</button>
</div>
)
}
import React,{Component} from "react";
import PropTypes from 'prop-types';
class MyComponent extends Component{
//클래스 내부
static defaultProps={
//name props 기본값 설정
name:"기본 이름"
}
static propTypes={
name : PropTypes.string,
//name의 props type을 문자열로 설정
age : PropTypes.number.isRequired
//필수적 & 숫자 여야함
}
state={
number:0
}
render(){
(...)
}
}
export default MyComponent;
.setState
로만 state를 업데이트 해야함.setState
: re-rendering
트리거this.state.number=this.state.number+1
처럼 직접 접근해 값을 수정하는 경우 자동으로 re-rendering
트리거 되지 않음