3.4.1.1 state 객체 안에 여러 값이 있을 때
state 객체 안에는 여러 값이 있을 수 있다.
▶ App.js
import Counter from './Counter';
const App = () => {
return <Counter />;
};
export default App;▶ Counter.js
import {Component} from 'react';
class Counter extends Component {
constructor(props) {
super(props);
// state의 초깃값 설정하기
this.state = {
number: 0,
fixedNumber: 0
};
}
render() {
const {number, fixedNumber} = this.state; // state를 조회할 때는 this.state로 조회합니다.
return(
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값: {fixedNumber}</h2>
<button
onClick={() => {
this.setState({number: number + 1});
}}
>
+1
</button>
</div>
);
}
}
export default Counter;결과값
state 안에 fixedNumber라는 또 다른 값을 추가해 주었다.
버튼이 클릭될 때 fixedNumber값은 그대로 두고 number 값만 바꿀 것이다.
this.setState 함수를 사용할 때 인자로 전달되는 개체 내부에 fixedNumber를 넣어 주진 않는다.
this.setState 함수는 인자로 전달된 객체 안에 들어 있는 값만 바꾸어 준다.
코드를 저장하고 브라우저를 열어서 버튼을 눌러보자. 맨 위에 있는 숫자만 업데이트되고 하단의 숫자는 잘 고정되어 있다.
3.4.1.2 state를 constructor에서 꺼내기
앞에서 state의 초깃값을 지정하기 위해 constructor 메서드를 선언해 주었는데 또 다른 방식으로도 state의 초깃값을 지정해 줄 수 있다.
▶ Counter.js
import {Component} from 'react';
class Counter extends Component {
state = {
number: 0,
fixedNumber: 0
};
render() {
const{number, fixedNumber} = this.state; // state를 조회할 때는 this.state로 조회한다.
return(
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값: {fixedNumber}</h2>
<button
onClick={() => {
this.setState({number: number + 1});
}}
>
+1
</button>
</div>
);
}
}
export default Counter;위와 같이 작성하면 constructor 메서드를 선언하지 않고도 state 초깃값을 설정할 수 있다.
3.4.1.3 this.setState에 객체 대신 함수 인자 전달하기
this.setState를 사용하여 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트된다.
onClick={() => {
this.setState({number: number + 1});
this.setState({number: this.state.number + 1});
}}코드를 위와 같이 작성하면 this.setSate를 두 번 사용하는 것임에도 불구하고 버튼을 클릭할 때 숫자가 1씩 더해진다. -> this.setSate를 사용한다고 해서 state 값이 바로 바뀌지는 않기 때문이다.
위에 대한 해결책은 this.setState를 사용할 때 객체 대신에 함수를 인자로 넣어 주는 것이다.
this.setState의 인자로 함수를 넣어 줄 때는 코드를 다음과 같은 형식으로 작성한다.
this.setState((pervState, props) => {
return {
// 업데이트하고 싶은 내용
}
})여기서 prevState는 기존 상태이고, props는 현재 지니고 있는 props를 가리킨다.
업데이트하는 과정에서 props가 필요하지 않다면 생략해도 된다.
▶ Counter.js
import {Component} from 'react';
class Counter extends Component {
state = {
number: 0,
fixedNumber: 0
};
render() {
const{number, fixedNumber} = this.state; // state를 조회할 때는 this.state로 조회한다.
return(
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값: {fixedNumber}</h2>
<button
// onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
onClick={() => {
this.setState(prevState => {
return {
number: prevState.number + 1
};
});
// 위 코드와 아래 코드는 완전히 똑같은 기능을 합니다.
// 아래 코드는 함수에서 바로 객체를 반환한다는 의미입니다.
this.setState(prevState => ({
number: prevState.number + 1
}));
}}
>
+1
</button>
</div>
);
}
}
export default Counter;화살표 함수에서 값을 바로 반환하고 싶다면 코드 블록 { }를 생략하면 된다.
브라우저에서 버튼을 누르면 숫자가 2씩 올라간다.
3.4.1.4 this.setState가 끝난 후 특정 작업 실행하기
setState를 사용하여 값을 업데이트하고 난 다음에 특정 작업을 하고 싶을 때는 setState의 두 번째 파라미터로 콜백함수를 등록하여 작업을 처리할 수 있다.
▶ Counter.js
import {Component} from 'react';
class Counter extends Component {
state = {
number: 0,
fixedNumber: 0
};
render() {
const{number, fixedNumber} = this.state; // state를 조회할 때는 this.state로 조회한다.
return(
<div>
<h1>{number}</h1>
<h2>바뀌지 않는 값: {fixedNumber}</h2>
<button
// onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다.
onClick={() => {
this.setState(
{
number: number + 1
},
() => {
console.log('방금 setState가 호출되었습니다.');
console.log(this.state);
}
)
}}
>
+1
</button>
</div>
);
}
}
export default Counter;이렇게 콜백 함수를 등록한 뒤 브라우저를 열어서 버튼을 누르고 개발자 도구의 Console탭을 확인하면 버튼을 누를때마다 callback 함수가 호출된다.
React는 자바스크립트 라이브러리로, 웹 애플리케이션 개발에 사용됩니다. React 애플리케이션을 개발하기 위해서는 다음과 같은 환경 구축이 필요합니다.
-
Node.js 설치
Node.js는 React 개발에 필요한 패키지를 설치하고 관리하는 데 사용됩니다. Node.js 설치는 https://nodejs.org/en/ 에서 다운로드 받을 수 있습니다. -
Create React App 설치
Create React App은 React 프로젝트를 쉽게 생성할 수 있는 도구입니다. 터미널에서 다음 명령어를 입력하여 Create React App을 설치합니다.
npm install -g create-react-app- React 애플리케이션 생성
터미널에서 다음 명령어를 입력하여 React 애플리케이션을 생성합니다.
create-react-app my-app위 명령어에서 my-app 대신 애플리케이션의 이름을 입력하면 됩니다.
- React 애플리케이션 실행
React 애플리케이션을 실행하기 위해서는 애플리케이션 폴더로 이동하여 다음 명령어를 입력합니다.
cd my-app
npm start위 명령어를 입력하면 React 애플리케이션이 실행됩니다.
이제 React 애플리케이션 개발을 시작할 수 있습니다.
