인프런 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 강의를 보고 정리한 내용입니다.
속성값
컴포넌트 생성시에 넘겨지는 값의 목록
읽기 전용으로 취급하고, 변경하지 않음
자식 컴포넌트 입장에서는 데이터/함수를 전달받는 유일한 통로 (But, Context API로 인해, 새로운 통로가 생김)
부모 컴포넌트의 데이터/함수를 자식 컴포넌트에게 넘겨주게 됨
컴포넌트는 HOC 기법을 통해, Redux의 값이나 함수를 넘겨받기도 함.
값 지정 시에 중괄호를 통해 다양한 탕비의 값 및 표현식 지적 가능.
중괄호를 빼면 문자열 타입의 값만 지정 가능
1
2
3
4
<div>
<Counter color="red" size="10">
<Counter color={"green"} size={10}>
</div>
EX)
1
2
3
4
5
6
class CustomComponent extends React.Component {
state = {
messageLength: this.props.message.length,
counter: 0,
};
}
초기에만
message 속성값을 참조.
message 속성값 변경에는 반영하지 못함
경우에 따라 3가지를 적절히 활용
- State는 아니지만, 변경되는 props값에 의존적인 속성을 정의.
변경 불가
.
1
2
3
get messageLength(){
return this.props.message.length;
}
- state는 아니지만, 이를 함수로서 대응.
변경 불가
.
1
2
3
getMessageLength(){
return this.props.message;
}
render 호출 직전에
속성값으로부터 상탯값을 계산하여 반영 상탯값으로 반영이 되기에 필요시에변경도 가능
1
2
3
4
5
6
7
8
9
10
state = {
messageLength:0
}
//render 메서드 호출 직전에 호출
static getDerivedStateFromProps(props,state){
return{
messageLength: props.message.length
}
}
속성값이 변경될 때, API 호출하기
getDerivedStateFromProps는 정적 메서드이기에 this 객체에 접근 불가
- 속성값 → 상탯값 루틴에 집중하도록, 원천적인 봉쇄
그렇기에 componentDidUpdate(props)에서 처리함
1
2
3
4
5
6
componentDidUpdate(prevProps){
const {postId} = this.props;
if (prevProps.postId !== postId){
this.requestPost(postId);
}
}
함수형 컴포넌트
에서는useEffect
훅을 활용하여,속성값/상탯값이 변경될 때
원하는 함수를 호출
할 수 있음