검색결과 리스트
글
Class Component
import React, {Component} from 'react';
class App extends Component{
render(){
return(
React {this.props.속성명}
);
}
}
export default App;
Function Component
import React from 'react';
function App(props){
return(
React {props.속성명}
)
}
export default App;
import React from 'react';
const App({data}){
return(
React {data}
)
}
export default App;
->return 생략 가능
state, LifeCycle API를 이용하여야 할 때만 Class Component 사용하는 것이 좋다.
이는 속도에 의한 차이이다.
설정
트랙백
댓글
글
총 열가지의 LifeCycle 메서드 존재
Will 접두사 - 작업 전 동작
Did 접두사 - 작업 후 동작
LifeCycle
- Mount, Update, UnMount로 분류
Mount
- Dom 생성 의한 웹브라우저 상 컴포넌트 활성화
Mount Call Method
constructor - 컴포넌트를 만들시 호출되는 클래스 생성자
getDerivedStateFromProps - props 값을 state 동기화 메서드
Ex)
static getDerivedStateFromProps(nextProps, prevState){
if(nextProps.value!==prevState.value){
return {value:nextProps.value};
}
return null
}
render - UI 렌더링 함수
componentDidMount - 컴포넌트가 웹브라우저 상 활성화 후 호출 메서드
Update
- porps,state 변경
- component 리렌더링
- this.forceUpdate 강제 렌더링 트리거
getDerivedStateFromProps - props 변경 시 호출
shouldComponentUpdate - 컴포넌트 리렌더링 여부 결정, state 변경 시점
Ex)
shouldComponentUpdate(nextProps, prevState)
메서드 생성하지 않으면 항상 true
render - 컴포넌트 리렌더링
getSnapshotBeforeUpdate - 변화된 내용을 DOM 반영 전 호출
Ex)
getSnapshotBeforeUpdate(prevProps, prevState)
이전 속성과 현재 상태의 속성 데이터 비교하여 처리 가능
componentDidUpdate - 컴포넌트 업데이트 끝난 후 호출
Ex)
componentDidUpdate(prevProps, prevState, snapShot)
전,후 컴포넌트의 데이터 접근 가능. 반환값이 있다면 snapShot에서 확인 가능
UnMount
- 컴포넌트를 DOM에서 제거
componentWillUnmount - 웹브라우저에서 컴포넌트가 사라지기 전 호출
설정
트랙백
댓글
글
state={
datas:['A','B','C',
data:''
}
state 기반 Array 형태 데이터 추가
Ex)
hadleInsert=()=>{
this.setState({
datas: this.state.datas.concat(this.state.data),
data:''
}
)
}
state 기반 Array 형태 데이터 삭제
handleRemove=(index)=>{
const {datas} = this.state;
this.setState({
dates:[
...datas.slice(0,index),
...datas.slice(index+1, datas.length)
]
}
)
}
const list = this.satae.data.map(
(data, index)=>(
<li key={index} onClick={()=>this.handleRemove(index)>
{data}
</li>
)
}
ES6 적용
this.state.datas.slice(0,index).concat(this.state.datas.slice(index+1,this.state.length))
filter 함수
- 배열의 특정 조건 만족 값만 추출 후 새로운 배열 생성
Ex)
const {datas} = this.state;
this.setState({
datas:data.filter((item,i)=>i!==index)
}
)
}
RECENT COMMENT