- state: 컴포넌트 내부에서 바뀔 수 있는 값
- props: 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값(읽기전용)
props를 바꾸려면 부모에서 바꿔줘야한다. (부모에서 물려받는 속성이기 때문이다!)
App 컴포넌트에서 MyComponent를 사용할 때 props를 바꿔야 값이 변경되지만 전달받은 name 값을 직접 바꿀 수 없다.
state는 class에서 state가 있고, 함수형에서는 useState라는 함수로 사용한다.
3.4.1 클래스형 컴포넌트의 state
//Counter.js
import React, {Component} from 'react';
class Counter extends Component {
constructor(props) {
super(props); -> state의 초기값 설정
this.state = {
number:0
};
}
render() {
const{ number } = this.state;
//state를 조회할 때 this.state로
return(
<div>
<h1>{number}</h1>
<button
onClick = {() => {
this.setState({ number: number + 1 });
//this.setState를 사용해 새로운 값을 넣을 수 있다
}}> +1 </button>
</div>
)
}
}
export default Counter;💡 컴포넌트 state
컴포넌트 state를 설정할 때는 constructor 메서드를 작성해 설정 해야한다.
constructor(props) {
super(props);
this.state = {
number:0
};
}이 constructor는 컴포넌트의 생성자 메서드이며 constructor를 작성할 때는 super(props)를 꼭 호출해야하고 이 함수가 호출되면 현재 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해 준다.
그 다음은 this.state 값에 초깃값을 설정해준다.(state는 객체 형식이여야한다.)
💡 render
render() {
const{ number } = this.state;
return(
<div>
<h1>{number}</h1>
<button onClick = {() => {
this.setState({ number: number + 1 });
}}> +1
</button>
</div>
)
}
}render 함수에 현재 state를 조회할 때는 this.state를 조회하면된다. button은 onClick이라는 값을 props로 넣어 줬고, 이것은 버튼이 클릭될 때 호출시킬 함수를 설정할 수 있게 해준다 (= '이벤트를 설정한다' 라고 부른다.)
이벤트 함수를 넣어 줄 때는 화살표 함수 문법(=arrow function)을 사용해 넣어주고, 함수 내부에는 this.setState라는 함수를 사용했다. 이 함수가 state 값을 바꾸게 해주는 것이라 생각하면 된다.
(버튼을 클릭하면 숫자가 올라간다.)
3.4.1.1 state 객체 안에 여러 값이 있을 때
Counter.js
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
number:0,
fixedNumber: 0
};
}
render() {
const{ number, fixedNumber } = this.state;
return(
<div>
<h1>{number}</h1>
<h2>안바뀌는거: {fixedNumber}</h2>
<button
onClick = {() => {
this.setState({ number: number + 1 });
}}> +1 </button>
</div>
)
}
}현재 state 안에 fixedNumber라는 값을 추가했고, 버튼이 클릭될 때 fixedNumber 값은 두고 number만 바꿀것이고, this.setState 함수를 사용할 때 인자로 전달되는 개체 내부에 fixedNumbe를 넣어 주지 않았다.
💡 this.setState 함수는 인자로 전달된 객체 안에 들어 있는 값만 바꾸어준다.
3.4.1.2 state를 constructor에서 꺼내기
state를 constructor 말고 다른 방식으로 초깃값을 설정할땐 static을 사용하면 된다.
state = {
number: 0,
fixedNumber: 0
};이제 뒤에 나오는 내용들은 constructor 대신 state를 쓰니 참고하자
3.4.1.3 this.setState에 객체 대신 함수 인자 전달하기
render() {
const{ number, fixedNumber } = this.state;
return(
<div>
<h1>{number}</h1>
<h2>안바뀌는거: {fixedNumber}</h2>
<button
onClick = {() => {
this.setState(prevState => {
return{
number: prevState.number +1
}
})
// 위 아래는 똑같은 기능이고, 아래는 함수에서 바로 객체를 반환한다는 의미이다.
this.setState(prevState=>({
number: prevState.number +1
}))
}}> +1 </button>
</div>
)
}여기서 prevState는 기존 상태고 props는 현재 지니고 있는 props를 가르킨다. 업데이트 과정에서 props가 안 필요하면 생략해도 된다.
//화살표 함수에서 값을 바로 반환하고 싶다면 {} 를 생략해도 된다.
const sum = (a, b) => a + b;onClick에서 두 번째로 this.setState 함수를 사용할 때는 화살표 함수에서 바로 객체를 반환하도록 했기 때문에 prevState ⇒ ({})와 같은 형태로 코드가 이루어 진다.
3.4.1.4 this.setState가 끝난 후 특정 작업 실행하기
setState를 사용해 값을 업데이트하고 그 다음 특정 작업을 하고 싶을때 setState의 두 번째 파라미터로 callback 함수를 등록 해 작업을 처리할 수 있다.
<button
onClick = {() => {
this.setState({
number: number +1
},
()=> {
console.log('방금 setState가 호출되었습니다.');
console.log(this.state);
}
)
}}> +1 </button>
3.4.2 함수형 컴포넌트에서 useState 사용하기
16.8 버전부터 useState라는 함수를 사용해 함수형 컴포넌트에서도 state를 사용할 수 있게 되었고, 이 과정에서 Hooks을 사용하게 된다.
3.4.2.1 배열 비구조화
const array = [1, 2];
const one = array[0];
const two = array[1];
//비구조화 할당 후
const array= [1, 2];
const [one, two] = array;3.4.2.2 useState 사용하기
//Say.js
import React, {useState} from 'react';
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('하이');
const onClickLeave = () => setMessage('바잉');
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1>{message}</h1>
</div>
)
}
export default Say;useState 함수 인자에는 상태 초깃값을 넣는다 useState는 객체가 아니여도 되고, 값의 형태는 자유이며 숫자/문자/객체/배열 다 가능하다.
함수를 호출하면 배열이 반환되는데 배열의 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸어주는 함수이다. 이 함수를 세터(Setter) 함수라고 부른다.
(배열 비구조화 할당을 통해 이름을 자유롭게 정해 줄 수도 있다.)
3.4.2.3 한 컴포넌트에서 useState 여러 번 사용하기
//Say.js
import React, {useState} from 'react';
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('하이');
const onClickLeave = () => setMessage('바잉');
const [color, setColor] = useState('black');
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1 style={{color}}>{message}</h1>
<button style={{color:'red'}} onClick={()=> setColor('red')}>빨간색</button>
<button style={{color:'green'}} onClick={()=> setColor('green')}>초록색</button>
<button style={{color:'blue'}} onClick={()=> setColor('blue')}>파란색</button>
</div>
)
}
export default Say;
