Property와 State
객체 프로퍼티이므로 바로 화면상에 텍스트로 표시할 수 없다.
그러므로 문자열 형태로 변환시켜 주어야 하며
String과 Object.entries가 사용된다.
Component에 Property로 입력된 것이 Object인 경우
String(Object.entries(objValue))로 사용할 수도 있다.
propTypes에 정의할 때는 objValue: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number,
}),
}
와 같이 사용할 수 있으며 이를 이용하면 객체 목록을 한 눈에 확인할 수 있어 편리하다.
필수 프로퍼티 사용하기
필수 프로퍼티는 propTypes를 지정해줄 때, isRequired 옵션을 지정해 주면 된다.
requiredStringValue: PropTypes.string.isRequired;
코드
import logo from './logo.svg';
import './App.css';
import TodaysPlan from './03/TodaysPlan';
import PropsComponent from './03/PropsComponent';
import ChildComponent from './03/ChildComponent';
import BooleanComponent from './03/BooleanComponent'
import ChildComponent2 from './03/ChildComponent2';
function App() {
return (
//
/*
<div>
<div><b>지루할 때: </b><BooleanComponent bored /></div>
<div><b>즐거울 때: </b><BooleanComponent /></div>
</div>*/
/*
<ChildComponent
boolValue={true}
numValue={1}
arrayValue={[1,2,3]}
objValue={{name: '제목', age: 30}}
nodeValue={<h1>노드</h1>}
funcValue={() => {console.log('메시지');}} />
/
/
</div>
</div>*/
);
}
export default App;
App.js
import React from 'react';
import PropTypes from 'prop-types';
class ChildComponent2 extends React.Component {
render() {
const {
objValue,
requiredStringValue,
} = this.props;
return (
<div>
<div>객체값: {String(Object.entries(objValue))}</div>
<div>필수값: {requiredStringValue}</div>
</div>
);
}}
ChildComponent2.propTypes = {
objValue: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number,
}),
requiredStringValue: PropTypes.string.isRequired,}
export default ChildComponent2;
ChildComponent2.jsx
class의 defaultProps 옵션을 사용하여 기본값을 지정할 수 있다.
? 조건문에서는 false와 undefined가 같은 것으로 취급되지만 ===비교문에서는 다른 것이다.
그러므로 혼동이 생기지 않게 미리 기본값을 지정해 주는 것이 좋다
defaultProps를 지정하는 예시
DefaultPropsComponent.defaultProps = {
boolValue: false,
};
자식 프로퍼티 사용하기
JSX는 마크업 표현식을 사용할 수 있으므로 컴포넌트 하위에 배치한 노드로 child property를 줄 수 있다.
- 컴포넌트 하위의 태그들을 노드라 하는가?
- 컴포넌트 상태 관리하기(state)
state: 컴포넌트의 상태 관리가 필요한 경우에 주로 사용한다.
컴포넌트에서 값의 변경이 필요할 때(예: 쇼핑몰에 물건 수량 입력, 댓글 입력 등) 사용할 수 있다.
보통 이벤트와 함께 사용한다(예: 버튼을 누르면 색 변경, 글씨 모양 변경 등)
*super를 할 때 props는 this.props를 안해도 되는가?
state함수에서의 주의점:
생성자를 사용하여 반드시 초기화해야만 한다.
state값을 변경할 때는, setState()함수를 반드시 사용해야 한다.
setState()함수는 비동기로 처리되며, setState()코드 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거친다.
state값은 직접 변경하면 안된다. render()함수로 화면을 그려주는 시점은 react엔진이 정하기 때문
*setState()함수의 인자를 function으로 전달하면 이전 state를 읽는 과정을 생략할 수 있다.
-> 어떻게 어떤 과정으로 이전 state가 전달되는지 이해가 안됨.
this.forceUpdate()(this는 해당class를 의미함.)
- 컴포넌트의 생명주기: 컴포넌트의 생성부터 소멸까지의 과정.
생명주기 함수: 생명주기 함수는 리엑트 엔진에서 자동으로 호출되므로 개발자 마음대로 호출할 수 없다.
constructor함수: 맨 처음에 생성될 때 한 번만 호출, 항상 super()함수를 포함하여야 한다. 프로퍼티와 생명 주기 상태를 초기화하는 중요한 과정을 포함하고 있다.
render함수: 데이터가 변경되어 새 화면을 그려야 할 때 자동으로 호출되는 함수이다.
static getDerivedStateFromProps(props, state) 함수
정적 함수이므로 함수 내에서 this.props 등으로 property나 state값에 접근할 수 없다.
componentDidMount() 함수
render()함수가 JSX를 화면에 그린 이후에 호출되는 함수.
컴포넌트가 화면에 포함된 이후 수행해야 하는 작업을 넣으면 된다.
shouldComponentUpdate(nextProps, nextState)
