.png)
함수형 컴포넌트
장점 : 클래스형 컴포넌트보다 선언하기 훨씬 편함. 메모리 자원도 보다 적게 사용함.
클래스형 컴포넌트
render 함수를 꼭 넣어야 됨!
장점 : state 기능 및 라이프사이클 기능을 사용할 수 있고, 임의 메서드를 정의할 수 있다. (업데이트 이후 함수형 컴포넌트도 사용할 수 있게 되었다)
Props
properties를 줄인 표현으로, 컴포넌트 속성을 설정할 때 사용하는 요소. 이 값은 부모 컴포넌트에서 설정할 수 있다.
propTypes
아래의 코드를 보면 import PropTypes from 'prop-types'로 선언함을 알 수 있다. 컴포넌트의 필수 props를 지정하거나, props의 타입을 지정할 때 사용한다. 여러 가지 종류를 설정할 수 있다.
Props - 함수형 컴포넌트
import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = ({ name, children, FavoriteNumber }) => {
return (
<div>
내이름은 {name}이고<br/>
children 은 {children}입니다.<br/>
제가 좋아하는 숫자는 {FavoriteNumber}입니다.
</div>
);
};
MyComponent.defaultProps = {
name:'기본 이름'
};
MyComponent.propTypes = {
name:PropTypes.string,
FavoriteNumber:PropTypes.number.isRequired
};
export default MyComponent;Props - 클래스형 컴포넌트
클래스형 컴포넌트에서 props를 사용할 때는
render 함수에서 this.props를 조회하면 된다.
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component {
render(){
const { name, children, FavoriteNumber } = this.props;
return (
<div>
내 이름은 {name}이고<br/>
children 은 {children}입니다.<br/>
제가 좋아하는 숫자는 {FavoriteNumber}입니다.
</div>
)
}
}
MyComponent.defaultProps = {
name:'기본 이름'
};
MyComponent.propTypes = {
name:PropTypes.string,
FavoriteNumber:PropTypes.number.isRequired
};
export default MyComponent;state
state란?
컴포넌트 내부에서 바뀔 수 있는 값을 의미함.
state - 함수형 컴포넌트
useState 라는 함수를 사용한다. (Hooks라는게 사용되는데 다음에 자세히 공부한다!)
useState 함수
const [var1,var2] = useState('')
함수의 인자에 초기값(아무값이나 상관없음)을 넣어 준다.
var1은 현재 상태가 저장되고,
var2는 상태를 바꾸어 주는 함수다. (이를 세터(setter) 함수라고 부른다!)
예제 :
import React, {useState} from 'react';
const Say = () => {
const [message, setMessage] = useState('');
const btn1 = () => setMessage('안녕하세요!');
const btn2 = () => setMessage('안녕히 가세요!');
const [color, setColor] = useState('black');
return (
<div>
<button onClick={btn1}>입장</button>
<button onClick={btn2}>퇴장</button>
<h1 style={{color}}>{message}</h1>
<button style={{color:'red'}} onClick={() => setColor('red')}>빨간색</button>
<button style={{color:'green'}} onClick={() => setColor('green')}>초록색</button>
<button style={{color:'blue'}} onClick={() => setColor('blue')}>파란색</button>
</div>
)
}
export default Say;state - 클래스형 컴포넌트
setState 라는 함수로 state의 값을 변경한다.
state를 조회할 때엔 this.state로 조회한다!
this.setState() 를 사용하여 state에 새로운 값을 넣을 수 있다!
예제 :
import React, {Component} from 'react';
class Counter extends Component {
state = { number:0, fixedNumber:0 }
render(){
const { number, fixedNumber } = this.state;
return (
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값 : {fixedNumber}</h2>
<button onClick={() => {
this.setState(asdf => { return {number:asdf.number+1} })
this.setState(asdf => ({number:asdf.number+1}))
console.log('방금 setState가 호출되었습니다!');
console.log(this.state)
}}>+1</button>
</div>
)
}
}
export default Counter;Constructor 와 super 메소드를 써서 state의 초깃값을 지정해 줄 수도 있다. (그러나 위에 코드로 지정하는 방식이 제일 편하다)
정리! props / state
props와 state는 둘 다 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있어 비슷해 보일 수 있지만, 그 역할은 매우 다르다!
props : 컴포넌트 속성값 / 부모 컴포넌트가 설정
state : 컴포넌트 상태값 / 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트 가능
기타(etc) :
JSX에서 style 적용할때 주의!!
<h1 style={color}> 는 오류다!
<h1 style={{color}}> 로 써야 맞다!
{ } 하나만 쓰면 이런 오류가 뜨더라..
Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
비구조화 할당 문법
(오른쪽이 비구조화 할당 문법이다)
배열 비구조화 할당
const array = [1,2]
const [one, two] = array;
오류 발생시
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
클래스형 컴포넌트에서 이런 오류가 발생한다?
렌더 될 때마다 함수를 호출해 무한루프가 발생해서 그렇다!
자세한건 https://kss7547.tistory.com/36 이분 블로그를 참조
오류 코드 :
<button onClick={this.setState({num1:num1+1})}>증가</button>해결방안 :
<button onClick={ () => this.setState({num1:num1+1})}>증가</button>책 예제 이미지만 보고 코드 짜보기! 복습이 필요하다!
책 - 리액트를 다루는 기술(개정판) | 김민준 | 길벗
