컴포넌트 선언방식은 클래스형 컴포넌트와 함수형 컴포넌트가 있다.
rcc + enter -> 클래스형 컴포넌트 작성 코드 생성
rsc + enter -> 함수형 컴포넌트 작성 코드 생성
render 함수가 무조건 있어야 한다.
함수를 작성할때 두 가지 방법이 있다. 두 가지 방법은 아예 동일한것이 아니므로 주의!
1. function 키워드 사용
자신이 종속된 객체를 this로 가리킨다.
컴포넌트 속성을 설정할 때 사용하는 요소이다.
props값은 컴포넌트를 불러서 사용하는 부모 컴포넌트에서 설정할 수 있다.
구조 분해 문법이라고도 불린다. 함수의 파라미터 부분에도 사용할 수 있다.
import React from 'react';
const MyComponent = ({ name, children }) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다.
children의 값은 {children}입니다.
</div>
);
};
//props 디폴트 값 설정
MyComponent.defaultProps = {
name : '기본이름'
};
//모듈 내보내기
export default MyComponent;
props의 타입을 지정할 수 있다. 이를 사용하려면 PropTypes 모듈을 불러와야 한다.
아래 예시는 name의 값이 무조건 문자열 형태로 받아져야 한다는 것을 의미한다.
props의 타입은 더 많은 종류가 있는데, 페이스북 깃헙에서 prop-types을 확인해보면 된다.
//props 타입 지정
import PropTypes from 'prop-types';
MyComponent.propTypes = {
name : PropTypes.string
};
render 함수 안에서 this.props를 조회하면 된다.
class MyComponent extends Component{
render(){
const {name, childern} = this.props;
(```)
}
}
props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이고, 사용되는 컴포넌트 자신은 props의 값을 설정할 수 없다. 즉, 부모만 바꿀 수 있고 자기 자신은 바꾸지 못하는 값이다.
반면, state는 컴포넌트 내부에서 바뀔 수 있는 값이다.
컴포넌트의 state는 반드시 객체 형태여야 한다.
생성자 메소드로 선언할 수도 있고, 다른 방식으로 아래와 같이 초깃값을 설정할 수 있다.
state = {
number = 0,
속성 = 초깃값,
(```)
};
state의 값은 this.setState를 사용해서 변경할 수 있다. 참고로 this.setState에 객체 대신 함수를 인자로 넣어줄 수도 있다.
this.setState(prevState, props) => {
return {
//업데이트할 내용
}
})
useState의 초깃값은 객체가 아니어도 되고 자유롭다.
배열 비구조화 할당 문법을 이용하여 사용한다.
const [ 현재 상태, 상태를 바꾸는 함수(세터함수) ] = useState(초깃값);