이번주 월요일 ~ 목요일까지 React의 Class Component를 배우고 오늘은 Function Component 찍먹 !
Class Component를 제대로 잘 연습하고 이해하면 함수 컴포넌트는 아주 쉽게 배울 수 있다고 하셨다. 오늘 공부는 Class 형 vs Function 함수형을 각각 만들어보고 비교하면서 공부해서 이해가 잘 되었다 !
Class Component VS Function Component
클래스 Component vs 함수 Component 차이 :
1. 코드의 사용 방식
- 어느 부분에서는 class가, 어느 부분에서는 함수가 코드가 짧고 간결하다. 어떤게 더 짧다고 말하기 어려울 듯..!
2. render() 매서드의 유무
- render() 가 있는 클래스 Component 가 조금 더 직관적으로 render() 를 볼 수 있다.
3. state 사용법
state, 상태를 설정하고 수정할 때 코드가 조금 다르다.
class의 경우 상태 설정이 편하고 사용할 때 코드가 길고
함수의 경우 상태 설정이 길고 사용할 때 편하다.
아직 리액트로 무언가 실질적으로 구현을 한 적이 없어서 추후 더 공부해보면 느끼는게 더 생기고 달라질 것 같다! 그 때 또 정리해봐야겠다.
예제 1) 기본 출력
클래스 Component
class App extends React.Component{
render(){
return(
<p>TGIF</p>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)class를 사용하여 TGIF 를 출력하기는 위와 같다. " React.Component{}" 를 쓰고 화면을 그리는 render() 매서드를 적는다.
함수 Component
function App(){
return (
<p>TGIF</p>
)
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
함수 Component의 경우 class 보다 조금 더 간결하다 "react.Componet{}" 가 빠지고 (오타가 많이 날 수 있는 곳) render도 빠졌다. render가 없어서 언제 render가 되는지 확인하기 조금 어려운 (?) 그낌이 있다. 함수 자체가 render, 그리고 return이 render 라고 생각하기!
함수 안에 여러가지 이것 저것 넣는 것을 제한하고 있지만 hook이라는 것을 사용해서 더 좋게 만들 수 있다 -> 나중에 hook 배울 예정 ! 성능에 있어서는 함수형이 속도가 느리고 비효율적이라고 생각되었었지만 초기 rendering에 있어 함수형이 10% 내외로 빨랐다고 한다. -
예제 2) state 설정
클래스 Component
class App extends React.Component{
constructor(props){
super(props)
this.state={
text:'금욜입니다',
text2:'야호'
}
}
render(){
return(
<>
<p>{this.state.text}</p>
<p>{this.state.text2}</p>
</>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
Class 컴포넌트의 상태 위와 같이 표현하고 return에서 사용할 때
this.state 를 붙여줘야한다.
장점 : 상태에 속성 추가할 때 꽤나 편하다 ! 바로 state {} 안에 key, value만 추가하면 끝
단점 : 상태 속성을 사용할 때 this.state.속성키값 또는 this.함수명 이렇게 코드가 조금 길다 !
함수 Component
function App(){
const [text1, setText1] = React.useState('굿모닝')
const [text2, setText2] = React.useState('굿모닝')
const [text3, setText3] = React.useState('굿모닝')
return (
<>
<p>{text1}</p>
<p>{text2}</p>
<p>{text3}</p>
</>
)
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)함수로 만든 같은 코드
**** const 와 같은 선언자를 꼭 해주어야 한다
const [text3, setText3] = React.useState('굿모닝')text3 - 상태 속성 key명 (변수명)
setText3 - 함수명
React.useState('굿모닝') -> 요거는 해당 변수의 초기값
장점 : this.state / this 와 같은 부가적인 코드가 필요없다 !
단점 : state 상태를 위와같이 변수처럼 설정, 한 곳에 모아 놓고 추가하는 class보다는 추가할 때마다 쓸게 조금 많은 점 (?)
예제 3) 함수 사용 ex. onClick, onSubmit ...
클래스 Component
class App extends React.Component{
constructor(props){
super(props)
this.state={
text:'금욜입니다',
text2:'야호'
}
}
onClick = e =>{
this.setState({
text:'바꿈',
text2:'바꿈2'
})
}
render(){
return(
<>
<p onClick = {this.onClick}>{this.state.text}</p>
<p>{this.state.text2}</p>
</>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)첫번 째 p에 onClick 이벤트를 주어 this.setState({})으로 해당 값을 들 바꿔서 다시 render()함 !
함수 Component
function App(){
const [text1, setText1] = React.useState('굿모닝')
const [text2, setText2] = React.useState('굿모닝')
const [text3, setText3] = React.useState('굿모닝')
const onClick = e =>{
setText1('귯결')
setText2('귯결')
setText3('귯결')
}
return (
<>
<p onClick ={onClick}>{text1}</p>
<p>{text2}</p>
<p>{text3}</p>
</>
)
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)함수 Component의 함수 onclick 사용-> 수정할 때 위에 state 설정 시에 사용한 두 번째 인자 (함수 명)을 사용하여 state수정하기
예제 4) 배열 추가해보기
Class Component
class App extends React.Component{
constructor(props){
super(props)
this.state={
text:'금욜입니다',
text2:'야호',
list : [1,2,3,4,5]
}
}
onClick = e =>{
this.setState({
text:'바꿈',
text2:'바꿈2'
})
}
render(){
return(
<>
<p onClick = {this.onClick}>{this.state.text}</p>
<p>{this.state.text2}</p>
<p>{this.state.list.map(v=>v)}</p>
<p>{this.state.list.map(v=>v+' ')}</p>
<p>{this.state.list.map(v=>{
if (v!=this.state.list[0]){
return v
}
})}</p>
</>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
클래스 컴포넌트의 배열 값 12345
띄어쓰기 없이 나온다 !
두번 째에는 + ' '을 해서 강제로 띄우고
세번 째는 익명함수를 사용해서 list 의 첫번재 요소를 제외하고 return
type은 NUMBER !
함수 Component
function App(){
const [text1, setText1] = React.useState('굿모닝')
const [text2, setText2] = React.useState('굿모닝')
const [text3, setText3] = React.useState('굿모닝')
const [list, setList] = React.useState([1,2,3,4,5])
const onClick = e =>{
setText1('귯결')
setText2('귯결')
setText3('귯결')
}
return (
<>
<p onClick ={onClick}>{text1}</p>
<p>{text2}</p>
<p>{text3}</p>
<p>{list.map(v=>v)}</p>
<p>{list.map(v=>v+10+' ')}</p>
<p>{list.map((v)=>{
if (v<3){
return v
}
})}</p>
<p>{list.map((v)=>{
if (v<3){
return typeof v + ' '
}
})}</p>
</>
)
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
함수 Component도 역시 똑같이 나온다. 배열 안의 요소가 띄어쓰기없이 join 되어서 나옴 !
String처럼 생겼지만 NUMBER !
예제 5) inpox box + submit + onSubmit + setState
userid: admin userpw: admin 인 경우 input box 아래에 '로그인 되었습니다' 나오게 만들기
Class Component
class App extends React.Component {
state = {
userid: '',
userpw: '',
isLogin: false
}
onChange = e =>{
this.setState({[e.target.name]: e.target.value})
}
onSubmit = e =>{
e.preventDefault() // url 이동을 막기 위함
if (this.state.userid == 'admin' && this.state.userpw=='admin'){
this.setState({isLogin:true})
}
this.setState({userid:'', userpw:''})
}
render() {
return (
<>
<form onClick={this.onSubmit}>
<input type="text" name="userid" value={this.state.userid} onChange={this.onChange} />
<input type="password" name="userpw" value={this.state.userpw} onChange={this.onChange}/>
<button type="submit">로그인</button>
</form>
{this.state.isLogin ? '로그인하셨습니다' : ''}
</>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
함수 Component
function App(){
const [userid, setUserid] = React.useState('')
const [userpw, setUserpw] = React.useState('')
const [isLogin, setIsLogin] = React.useState(false)
const handleUserid = e =>{
setUserid(e.target.value)
}
const handleUserpw = e =>{
setUserpw(e.target.value)
}
const onSubmit = e =>{
e.preventDefault()
if (userid==='admin' && userpw==='admin'){
setIsLogin(!isLogin)
}
setUserid('')
setUserpw('')
}
return(
<>
<form onSubmit={onSubmit}>
<input type="text" value={userid} name="userid" onChange={handleUserid} />
<input type="passowrd" value={userpw} name="userpw" onChange = {handleUserpw} />
<button type="submit">로그인 </button>
</form>
{isLogin ? '로그인되었습니다' : '' }
</>
)
}
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [79일차] 20210705 react Webpack 웹팩 수동으로 개발 환경 구축/ 핫리로드 / & CRA 사용버전 (0) | 2021.07.05 |
|---|---|
| [Webpack] 웹팩이란 ? 웹팩 사용 전, 알아야할 기본 개념 6가지 (0) | 2021.07.05 |
| 3주 팀프로젝트 리뷰 (0) | 2021.07.02 |
| [78일차] 20210702 React 리액트 함수형 컴포넌트 (0) | 2021.07.02 |
| [76-77일차 복습] 리액트 댓글 추가 수정 삭제 / React 합성과 상속 (0) | 2021.07.01 |
