3. Componenet

Component

- 데이터에 따른 UI 형성
- Life Cycle API 의한 컴포넌트가 화면상 변화가 일어 날 때 처리
- 메서드 이용하여 기능 추가

- export 이용하여 사용

- 불러 올 경우 import 컴포넌트 from './컴포넌트'

 

props
- 속성 사용
  렌더링->값 설정->기본 값 설정-> 값 검증

 

Ex)

<div>{this.props.속성명}></div>

 

속성 값 설정
호출.js
<컴포넌트 test="test"/>

 

속성 기본 값 설정
default props
컴포넌트.js
컴포넌트.defaultProps={
test : '기본 속성 값'
}

 

속성 검증
import PropTypes from 'prop-types'

컴포넌트.PropTypes ={
속성 명 : PropTypes.string//설정
}

static defaultProps = {
속성 명 : '속성 값'
}
static propTypes = {
속성 명 : PropTypes.string
}

숫자 값 경우 ""이 아니라 {} 처리 해서 넘겨야한다

필수적인 요소로 지정하려면 isRequired 처리
속성 명 : PropTypes.string.isRequired

state
- props는 부모 컴포넌트에서 설정
- 컴포넌트 자신은 props를 읽기 전용으로만 접근이 가능하여 state 이용
- this.setState() 이용하여 업데이트 처리

- state 초기 값은 컴포넌트 생성자 method constructor 내부에서 설정
Ex)
constructor(props){
super(props);
this.state={
number : 0
}
}

or

state = {
number : 0
}

{this.state.number}

변경 시
onClick=()=>{
this.setState({
number: this.state.number+1
}
)
}

 

배열 처리되어 있는 데이터를 이용하여 Component 처리

render(){

const arr = ['A','B','C'];

const arrList = arr.map(

(arrData, idx)=>(<li key={idx}>{arrData}</li>)

);

return(

<ul>

{arrList}

</ul>

->map 처리 시 key 값이 존재해야한다. 이는 데이터가 가진 고유의 값이 필요하기 때문이다

->arr 처리가 된 것을 state 처리를 하여 사용 가능하다

state={

arr = ['A','B','C']

}

arr.map => this.state.map 으로 변경하여 처리하면 된다.