일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 컴퓨터공학 #c #c언어 #문자열입력
- 잔
- BOJ #컴퓨터공학 #C++ #알고리즘 #자료구조
- HTML #CSS
- 컴퓨터공학 #자료구조 #스택 #c++ #알고리즘 #백준문제풀이
- 컴퓨터공학 #Java #자바 #클래스 #객체 #인스턴스
- Today
- Total
영벨롭 개발 일지
[React]리액트 함수형 컴포넌트와 클래스형 컴포넌트 & Props와 State 본문
[ Props와 State ]
Props는 컴포넌트 외부에서 컴포넌트에게 주는 객체형 데이터입니다. 즉, 상위 컴포넌트에서 하위 컴포넌트로부터 데이터를 넘겨주는 것입니다. 읽기 전용 데이터로 수정 불가능합니다.
State는 컴포넌트 내부에서 변경할 수 있는 데이터입니다. props와는 반대로 해당 컴포넌트 안에서 데이터를 수정할 수 있습니다.
Props와 State는 모두 각각 변경이 발생하면, 리렌더링이 발생할 수 있습니다.
★ Render 함수와 Props & State
Render 함수는 Props와 State를 바탕으로 컴포넌트를 그립니다. 그리고 props와 state가 변경되면 컴포넌트를 다시 그리는 즉, 리렌더링이 발생합니다.
[ 함수형 컴포넌트 ]
import React from 'react';
const FunctionComp = () => {
return (
<div>
</div>
);
};
export default FunctionComp;
★ 함수형 컴포넌트의 특징
1. JSX를 return문을 사용해서 반환한다.
2. state와 lifeCycle 관련 기능을 사용할 수 없다.
함수형 컴포넌트는 state와 lifeCycle 관련 기능을 사용할 수 없기 때문에 Hook으로 이 기능을 대체합니다.
useState 훅을 통해 state를 사용합니다.
3. props를 바로 호출할 수 있다.
4. 컴포넌트형.defaultProps = { } 로 props의 기본값을 설정한다.
import React, { useState } from 'react';
const FunctionComp = ({ message }) => {
// state
const [count, setCount] = useState(0);
// 이벤트 핸들링
const onClick = () => {
setCount(count + 1)
}
return (
<div>
<h1>{message}</h1>
<button type="button" onClick={onClick}>{count}</button>
</div>
);
};
// props 기본값 설정
FunctionComp.defaultProps = {
message: 'hello world'
}
export default FunctionComp;
[ 클래스형 컴포넌트 ]
import React, { Component } from 'react'
class ClassComp extends Component {
render(){
return(
<div>
</div>
)
}
}
export default ClassComp;
★ 클래스형 컴포넌트의 특징
1. JSX를 render() 함수를 사용해서 반환한다.
2. state와 lifeCycle 관련 기능을 사용할 수 있다
3. class 키워드로 시작하며 React.Component로 상속 받는다.
3. props를 조회할 때 this 키워드를 사용해야 한다.
4. 컴포넌트 내부에서 static defaultProps = { } 로 props의 기본값을 설정한다.
import React, { Component } from 'react'
class ClassComp extends Component {
// props 기본값 설정
static defaultProps = {
message: 'hello world'
}
// state 사용법(1)
// state = {
// count: 0
// }
// state 사용법(2)
constructor(props){
super(props);
this.state = {
count: 0
}
}
// 이벤트 핸들링
onClick = () => {
this.setState({
count: this.state.count + 1
})
}
render(){
return(
<div>
<h1>{this.props.message}</h1>
<button type="button" onClick={this.onClick}>{this.state.count}</button>
</div>
)
}
}
export default ClassComp;
'Front-end > React' 카테고리의 다른 글
[React] React란? - React를 사용하는 이유 (0) | 2024.04.21 |
---|---|
[React]리액트 쿠키 react-cookie 다루기 (0) | 2022.07.19 |
[React]리액트 fetch 와 axios - 영화 정보 가져오기 (0) | 2022.06.02 |
[React]리액트 useEffect 사용법 (0) | 2022.05.29 |
[React]리액트 useRef 사용법 (0) | 2022.05.29 |