1. INTRO
react를 이해하기 위해 컴포넌트의 구조, 그 중 state를 사용하는 방법을 배웠습니다. 원래 처음은 어려운 법이니깐 화이팅해보아요.
2. state 변수
컴포넌트 내부에서 읽고 업데이트 할 수 있는 값. state 변수 값이 변경되면 리렌더링이 발생한다. 클래스형 컴포넌트는 setState() 메서드를, 함수형 컴포넌트는 useState() 훅 함수가 반환하는 세터 함수를 이용해서 값을 변경한다.
- 클래스형 컴포넌트에서 state 변수 사용
버튼을 눌렀을 때 숫자가 올라가는 페이지 생성
[App.js 파일에 Counter 컴포넌트를 추가]
import { Component } from "react";
import Counter from "./Counter";
class App extends Component {
render() {
return (
<>
<Counter />
</>
);
}
}
export default App;
[Counter.js 파일을 생성]
import { Component } from "react";
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
number: 0,
fixedNumber: 10,
};
}
render() {
const { number, fixedNumber } = this.state;
return (
<>
<h1>{number}</h1>
<button onClick={() => this.setState({ number: number + 1 })}>
하나증가
</button>
<h1>{fixedNumber}</h1>
</>
);
}
}
export default Counter;>>> constructor 메서드를 사용하지 않고 state 변수를 초기화
위의 방식보다 통상적으로 많이 쓰는 방식이다.
import { Component } from "react";
class Counter extends Component {
**state = {
number: 0,
fixedNumber: 10,
};**
render() {
const { number, fixedNumber } = this.state;
return (
<>
<h1>{number}</h1>
<button onClick={() => this.setState({ number: number + 1 })}>
하나증가
</button>
<h1>{fixedNumber}</h1>
</>
);
}
}
export default Counter;>>> setState() 메서드를 연속해서 호출하는 경우
다섯증가하도록 코드를 수정하려면 아래와 같이 표현 할 수 있다.
<button onClick={() => {
this.setState({ number: number + 1 });
this.setState({ number: number + 1 });
this.setState({ number: number + 1 });
this.setState({ number: number + 1 });
this.setState({ number: number + 1 });
}}>>>> updater 함수 이용 ⇒ https://ko.reactjs.org/docs/react-component.html#setstate
<button onClick={() => {
this.setState(prevState => ({ number: prevState.number + 1 }));
this.setState(prevState => ({ number: prevState.number + 1 }));
this.setState(prevState => ({ number: prevState.number + 1 }));
this.setState(prevState => ({ number: prevState.number + 1 }));
this.setState(prevState => ({ number: prevState.number + 1 }));
}}>
>>> 상태 변수 업데이트 후 특정 작업 실행 시 setState 메서드의 두번째 파라미터에 콜백 함수를 등록
import { Component } from "react";
class Counter extends Component {
state = {
number: 0,
fixedNumber: 10
};
render() {
const { number, fixedNumber } = this.state;
return (
<>
<h1>{number}</h1>
<button onClick={() => {
this.setState({ number: number + 1 }, () => {
console.log('setState가 호출되었습니다.', this.state, number);
});
}}>
다섯증가
</button >
<h1>{fixedNumber}</h1>
</>
);
}
}
export default Counter;
- 함수형 컴포넌트에서 useState 사용하기 (훅함수)
>>> Say.js 파일을 생성하고, 함수형 컴포넌트를 구현
[App.js]
import { Component } from "react";
import Say from "./Say";
class App extends Component {
render() {
return (
<>
<Say />
</>
);
}
}
export default App;
[Say.js]
import { useState } from "react";
function Say() {
const [message, setMessage] = useState('');
return (
<>
<h1>{message}</h1>
<button onClick={() => setMessage("입장합니다.")}>입장</button>
<button onClick={() => setMessage("퇴장합니다.")}>퇴장</button>
</>
);
}
export default Say;
>>> 여러 개의 useState 사용도 가능
[함수형]
import { useState } from "react";
function Say() {
const [message, setMessage] = useState('');
const [color, setColor] = useState('black');
return (
<>
<h1 style={{ color }}>{message}</h1>
<button onClick={() => setMessage("입장합니다.")}>입장</button>
<button onClick={() => setMessage("퇴장합니다.")}>퇴장</button>
<button onClick={() => setColor("red")}>빨간색</button>
<button onClick={() => setColor("blue")}>파란색</button>
<button onClick={() => setColor("yellow")}>노란색</button>
</>
);
}
export default Say;- state 사용 시 주의사항
1) state 값 변경시 setState(클래스형 컴포넌트) 또는 useState 훅 함수가 반환한 세터 함수(함수형 컴포넌트)를 이용 ! -> 변경 된 값이 화면에 반영될 수 없음 -> forceUpdate() 함수로 강제 반영할 수 있지만 권장 X
(렌더링 발생하는 경우는 props, update, forceUpdate() 호출됐을 때.)
2) 배열 또는 객체를 업데이트해야하는 경우, 그 사본을 만들고 그 사본의 값을 업데이트 후 setState 또는 세터 함수를 통해서 반영
>>> 객체의 사본을 만드는 방법 => 전개 연산자 사용
const obj = { a: 1, b: 2, c: 3 };
const newObj = { ...obj, b: 20 };
>>> 배열의 사본을 만드는 방법 => 전개 연산자 또는 배열 내장 함수 활용
const arr = [1, 2, 3, 4];
const newArr1 = [...arr]; // [ 1, 2, 3, 4 ]
const newArr2 = arr.concat(100); // [ 1, 2, 3, 4, 100 ]
const newArr3 = arr.filter(i => i % 2 === 0); // [ 2, 4 ]
const newArr4 = arr.map(i => i * i); // [ 1, 4, 9, 16 ];
주의
const newArr5 = arr.push(100); // arr 배열에 100을 추가하고, 배열 길이를 반환
참고하면 좋은 사이트
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push
OUTRO
어제부터 수업 내용을 후다닥 받아 적고 코드를 따라치며 겨우 따라가는 느낌이 든다. 리액트 진도는 다음주에 끝나는데, 사후시험이 있는 걸로 알고 있어서 꾸준히 복습해야할 것 같다.
