리액트에서 속성값(props)이란?
컴포넌트 생성 시에 부모 컴포넌트로부터 넘어오는 값(데이터, 함수)이다. 속성값은 읽기 전용으로 취급하고, 변경하지 않는다.
값 지정 시에 중괄호를 넣으면 문자열 타입 외 다양한 타입 및 표현식을 지정할 수 있다. 즉, 중괄호를 빼면 문자열 타입 값만 지정 가능하다. 따라서 객체를 지정할 때는 중괄호가 두 개인 셈이 된다.
<div>
<Counter color="red" size="10" />
<button style={{ width: 100 }}></button>
</div>속성값으로 상태값 정의하기
class CustomComponent extends React.Component {
state = {
messageLength: this.props.message.length,
counter: 0,
};
}초기에만 message 속성값을 참조하고 message 속성값 변경은 반영하지 못한다. 따라서 경우에 따라 아래 3가지를 적절히 사용하면 된다.
// state는 아니지만, 변경되는 props 값에 의존적인 속성을 정의. 변경 불가
get messageLength() {
return this.props.message.length
}// state는 아니지만, 이를 함수로서 대응. 변경 불가
getMessageLength() {
return this.props.message;
}// getDeriveStateFromProps는 props로부터 state를 만드는 함수
// render 전에 호출되어 props가 바뀔 때마다 state에 반영된다. 반영할 상태값이 없으면 null을 반환한다
static getDerivedStateFromProps(props, state) {
return {
messageLength: props.message.length
};
}속성값이 변경될 때 API 호출하기
getDerivedStateFromProps() 함수는 정적(static) 메서드이므로 this 객체에는 접근할 수 없다. 따라서 componentDidUpdate(props) 함수로 처리한다.
버튼을 클릭했을 때 포스트 번호가 10에서 20으로 바뀌는 예제다.
import React from 'react';
import 'App.css';
class PostDetail extends React.Component {
// mount 되고 나서 호출
componentDidMount() {
const { postId } = this.props;
this.requestPost(postId);
}
// 업데이트 되었을 떄 호출
componentDidUpdate(prevProps) {
const { postId } = this.props; // postId를 props에서 읽어온다
if ( postId !== prevProps.postId ) {
this.requestPost(postId);
} // 직전 값과 다른지 비교해서 update
}
requestPost(postId) {
console.log(`request post #${postId}`);
}
render() {
const { postId } = this.props;
return (
<div>
포스팅 #{postId}
<hr/>
포스팅 내용...
</div>
);
}
}
class App extends React.Component {
state = {
postId: 10
}
render() {
return (
<div>
<PostDetail postId = { this.state.postId } />
<button onClick={() => this.setState({ postId: 20 })}>
postId 변경
</button>
</div>
);
}
}
export default App;
중간에 찍은 console.log도 바뀐 포스트 번호로 잘 찍힌다.
