TIL no.34 - React state, props
state
화면에 보여줄 컴포넌트의 UI 정보(상태)를 가지고 있는 객체이다.
import React from 'react';
class State extends React.Component {
constructor() {
super();
this.state = {
name: 'jongjin',
age: 30
};
}
render() {
return (
<div>
<div>이름: {this.state.name}</div> // 이름: 'jongjin'
<div>나이: {this.state.age}</div> // 나이: 30
</div>
);
}
}
export default State;
화면에 보여줄 컴포넌트의 UI 정보(상태)를 가지고 있는 객체이다.
import React from 'react';
class State extends React.Component {
constructor() {
super();
this.state = {
name: 'jongjin',
age: 30
};
}
render() {
return (
<div>
<div>이름: {this.state.name}</div> // 이름: 'jongjin'
<div>나이: {this.state.age}</div> // 나이: 30
</div>
);
}
}
export default State;
state
는 해당 컴포넌트의 초기값으로 보면 된다. 초기값 설정은 필수이다.
setState
state
에서 상태값을 설정하는 이유는 컴포넌트 안의 요소에서 그 상태값을 반영하여 데이터가 바뀔 때 마다 효율적으로 화면(UI)에 나타내기 위함이다.
사용자의 행동에 따라 state
값을 변경하기 위해 setState
메소드를 사용한다.
import React from 'react';
class State extends React.Component {
constructor() {
super();
this.state = {
name: 'jongjin',
age: 30
};
}
handleClick = () => {
this.setState({age: age + 1})
}
render() {
return (
<div>
<div>이름: {this.state.name}</div> // 이름: 'jongjin'
<div>나이: {this.state.age}</div> // 나이: 30
<button onClick={this.handleClick}> 새해 </button>
</div>
);
}
}
export default State;
React에서 이벤트 리스너는 해당 태그에 바로 작성해줄 수 있다.
새해
라는 버튼을 누르면 <button>
요소에서 onClick
이벤트가 발생
this.handleClick
, 현재 컴포넌트의 handleClick
함수를 실행
함수 실행 시 setState
메소드가 실행되며 age
값에 +1을 추가한다.
그럼 render 함수가 호출 되며 바뀐 state
값을 반영하여 종진이는 나이를 한 살 더 먹는다..( ㅠㅅㅠ)
Props
부모 컴포넌트로부터 전달 받은 데이터를 가진 객체이다.
Props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다.
import React from 'react';
import Child from '../pages/Child/Child';
class State extends React.Component {
constructor() {
super();
this.state = {
name: 'jongjin',
age: 30
};
}
hanldeClick = () => {
this.setState({age: age + 1})
}
render() {
return (
<div>
<h1>김종진 </h1>
<Child name={this.state.name} age={this.state.age}
plusAge={this.handleClick>
</div>
);
}
}
export default State;
부모 컴포넌트로부터 전달 받은 데이터를 가진 객체이다.
Props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다.
import React from 'react';
import Child from '../pages/Child/Child';
class State extends React.Component {
constructor() {
super();
this.state = {
name: 'jongjin',
age: 30
};
}
hanldeClick = () => {
this.setState({age: age + 1})
}
render() {
return (
<div>
<h1>김종진 </h1>
<Child name={this.state.name} age={this.state.age}
plusAge={this.handleClick>
</div>
);
}
}
export default State;
부모 컴포넌트에서 <Child/>
컴포넌트를 import 해준다.
자식 컴포넌트의 props
로 name
과 age
속성을 생성해주고 각각 state
값을 전달해준다.
// Child.js
import React from 'react';
class Child extends React.Component {
render() {
return (
<div>
<div>이름: {this.props.name}</div>
<div>나이: {this.props.age} </div>
<button onClick={this.props.plusAge}> 새해 </button>
</div>
);
}
}
export default State;
부모 컴포넌트에서 자식 컴포넌트에게 props객체의 특정 키 값을 전달해주면 자식 컴포넌트에서도 state
값을 확인 할 수 있다.
함수도 동일하게 props
로 내려받아 실행 시킬 수 있다.
자식 컴포넌트에서 button
클릭 시 부모 컴포넌트로 받은 plusAge
함수 실행
부모 컴포넌트에서 setState
메소드로 age가 한살 증가 하고 render
함수를 호출
<Child />
컴포넌트에 변경된 state
값(this.state.age)를 전달하여 나이를 올린다.
비구조적 할당
위에 State, Props 코드를 작성해보면서 중복되는 부분이 너무 잘 보인다.
바로 this.state , this.props 이다. 이 중복되는 작성을 해결하는 방법이 바로 비구조적 할당 이다.
import React from 'react';
class State extends React.Component {
constructor() {
super();
this.state = {
name: 'jongjin',
age: 30
};
}
render() {
const {name , age} = this.state;
return (
<div>
<div>이름: {name}</div>
<div>나이: {age}</div>
</div>
);
}
}
export default State;
this.state
이 적용되는 state
값들을 다 모아서 this.state
로 할당해주면
이후에 해당 state
값들은 그냥 state
Key값만 써주면 된다!
Author And Source
이 문제에 관하여(TIL no.34 - React state, props), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@playck/TIL-no.34-React-state-props-vb9xqit2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)