Neo's Programming

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)

}

)

}