📌 Class형 컴포넌트 특징
- Component를 상속 받아야 한다.
class Test extends React.Component{//todo..}
- 자신의 state, props, function 등 모두 this 키워드를 사용하여 접근해야한다.
this.state.name / this.props.age / this.handleIncrement
- class 안 render() 함수가 포함되어야한다.
class Test extends React.Component{
render(){
return (<h1>Hello, OnceDeveloper</h1>)
}
}
- 멤버변수나 fucntion등은 Class가 만들어질때 한 번만 할당이 되어지고 변경되는 경우 render함수만 반복적으로 호출된다.
- LifeCycle API 이용 가능하다.
- state
- 선언 및 초기화
state = { name : 'OnceDeveloper' }
- 변경 - setState()
this.setState({name : 'TwiceDeveloper'});
class Test extends React.Component {
state = {
name : 'OnceDeveloper'
}
changeState = () => {
this.setState({name : 'TwiceDeveloper'});
}
render{
return(<div>hello~ {this.state.name}<div>);
}
}
[ Test code ]
class Test extends React.Component {
state = {
name : 'OnceDeveloper'
}
render() {
return (
<div>
<h1>Hello, {this.state.name}</h1>
<h1>I am {this.props.age} years old</h1>
</div>
);
}
}
📌 Function형 컴포넌트 특징
- 클래스형 컴포넌트보다 선언하기 수월하다.
- 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다.
- this 키워드를 사용하지 않아도 접근 가능하다.
- props는 파라미터로 받아 사용 가능하다.
- render() 함수를 포함하지 않아도 된다.
- state, 라이프사이클 API를 사용할 수 없다.
- 단순히 화면에 값을 출력해주고싶을 때 사용한다.
[ Test code ]
- Function
funtion test(props){}
function test(props) {
return <h1>Hello, {props.name}</h1>;
}
- Arrow Function
funtion test = () => {}
function test = (props) =>{
return <h1> Hello, {props.name}</h1>;
}
📌 React Hooks
- 공식 사이트 link => React Hooks
- Class 형태였던 Component를 Function을 통해 만들 수 있게 해주는 API
- Function형 컴포넌트의 장점을 갖고 Class형 컴포넌트와같은 기능들을 Hooks를 이용하여 사용할 수 있게됨.
- Class형 컴포넌트와 달리 Function형 컴포넌트는 props나 state가 변경이 되면 코드블락 안 전체 코드가 반복되어짐 => Hooks를 이용해 이전의 값들을 저장할 수 있음.
- state
- 선언 및 초기화
const ['state로 설정할 이름', 'state를 변경할 이름'] = useState('설정할 state 초기값')
const [age, setAge] = useState(20);
- 변경
state 선언 시 2번째 인자로 설정한 이름으로 호출 (위의 예시로 setAge)
setAge(21);
useEffect
- 처음에 로딩될 때 호출 && 인자값이 업데이트 될 때 호출
componentDidMount 와 componentDidUpdate를 합친 느낌
두번째 인자를 빈 값으로[] 호출을하면 처음에만 호출하고 두번째 인자에 값을 넣으면 그 값이 변경될때마다 호출됨
- useEffect()
mount될 때 + update될 때 rendering
- useEffect(,[])
mount될 때만
- useEffect(,[age])
mount될 때 + age가 update되는 경우에만 rendering
[ Test code ]
function Test = (props) => {
const [age, setAge] = useState(20);
const changeState = () => {
setAge(21);
}
useEffect(changeState(),[age]);
return (
<div>
I'm {age} years old.
my name is {props.name}.
<button onClick={() => changeState()}>
버튼 클릭
</button>
</div>
);
}