[TIL #20 WECODE] React State & props
210310 WECODE #20 State & props
1. State 객체
- 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
- 화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체
- state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다.
import React from 'react';
class State extends React.Component {
constructor() {
super();
this.state = {
key: "value"
};
}
render() {
return (
<div>
화면에 나타내고 싶은 JSX 요소
</div>
);
}
}
export default State;
- state를 설정할 때는 화면에 보이듯이
constructor
함수를 작성하여 설정합니다. this.state
값에 "컴포넌트의 초기 상태값"을 설정
2. Props(속성)
-
컴포넌트의 속성값
-
부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체
-
props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다.
-
자식 컴포넌트의 props 로
titleColor
속성을 생성!
-
titleColor
의 값으로this.state.color
, 즉 부모 컴포넌트의 state 객체 중color
값을 전달 -
이러한 방식으로 props를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있다!
-
render
함수와return
함수 사이에서this.props
값을console.log
로 확인해보자 -
결과 확인 시 props 객체 안에 부모로부터 전달받은 데이터가
{key:value}
형태로 담겨 있는 것을 확인할 수 있다.-
<button>
요소에서onClick
이벤트 발생 -
이벤트 발생 시
this.props.changeColor
실행 -
props 객체의
changeColor
, 즉 부모 컴포넌트로부터 전달받은handleColor
함수 실행 -
handleColor
함수 실행 시setState
함수 호출 -
state의
color
값을'blue'
로 변경 -
render
함수 호출 -
<Child />
컴포넌트에 변경된 state 데이터(this.state.color
) 전달 -
this.props.titleColor
를 글자 색상으로 지정하는<h1>
타이틀 색상 변경
-
Author And Source
이 문제에 관하여([TIL #20 WECODE] React State & props), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@whoyoung90/TIL-20-WECODE-React-State-props저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)