React는 View
를 담당하는 라이브러리이다. 그리고 리액트는 component들로 이루어졌다고 볼 수 있는데, component란 재사용가능한 UI 요소의 최소단위이다. React, UI, 보여지는 것! 항상 이 부분을 염두에 두고 리액트를 공부해야 이해하기 좋은 것 같다! ✨
state 는 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트 UI의 상태값을 의미한다. 그래서 화면에 보여줄 컴포넌트의 UI정보를 객체형태로 가지고 있다.
state는 컴포넌트 내에서 정의하고 사용하면서 그 상태데이터는 얼마든지 변경될 수 있다. 👏🏻
state는 object 형태로 되어있으며, 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있다.
import React from 'react';
class State extends React.Component {
constructor() {
super();
this.state = {
color: 'red'
};
}
render() {
return (
<div>
<h1>Class Component | State</h1>
</div>
);
}
}
export default State;
class component
는 필수적으로 render 함수가 필요하고, 화면에 나타내고 싶은 요소들은 jsx 문법으로 return 안에서 작성해 준다. this.state = {
color: 'red'
};
🤔 state는 왜 필요하고, 왜 사용하는걸까?
→ 리액트는 view를 담당하는거고, 각각의 컴포넌트들이 모여 화면에 띄워진다. 컴포넌트의 상태에는 이런 보여지는 것들에 대한 데이터가 들어있는것이고, 보여지는 화면에 변화가 생긴다는것은 이 컴포넌트 상태값이 바뀌었기 때문인것이다.
또한! state 상태에 변화가 생기면 리액트는 자동으로 render함수를 호출하면서 변화된 상태값을 반영한 화면을 다시 브라우저에 띄워준다. 이런 과정으로 데이터가 바뀔 때마다 효율적으로 UI 를 나타내주기 위해 state에서 상태값을 설정해주는거다 👏🏻
import React, { Component } from 'react';
export class State extends Component {
constructor() {
super();
this.state = {
color: 'red'
};
}
render() {
return (
<div>
<h1 style={{ color: this.state.color }}>Class Component | State</h1>
</div>
);
}
}
export default State;
→ 이렇게 State 라는 컴포넌트에서, constructor
부분과 / 그 안의 state에 있는 데이터를 어떻게 가져와 사용하는지 알아보자!
this.state = {
color: 'red'
};
this.state
객체는 super() 메소드 다음으로 온다. key - value 짝
으로 데이터가 들어있다. <h1 style={{ color: this.state.color }}>Class Component | State</h1>
// this : 해당 컴포넌트
// this.state : 해당 컴포넌트의 state 객체
// this.state.color : state 객체의 특정 key(color)값. 즉 "red"
jsx 문법에서는 이렇게 html 처럼 작성하다가 자바스크립트문법을 작성해주어야 할 때에는 {중괄호}를 열어서 작성해준다. 그리고 color를 state에 있는 데이터를 가져와 쓰기위해 객체에 접근하는 dot notation을 이용해서 this.state에 있는 color의 키에 담긴 값을 불러와 써준다. (='red')
state의 상태는 setState를 이용해서 업데이트 시켜줄 수 있다. ✨
import React, { Component } from 'react';
export class State extends Component {
constructor() {
super();
this.state = {
color: 'red',
};
}
handleColor = () => {
this.setState({
color: 'blue'
})
}
render() {
return (
<div>
<h1 style={{ color: this.state.color }}>Class Component | State</h1>
<button onClick={this.handleColor}>Click</button>
</div>
);
}
}
export default State;
→ 이 코드에서 발생하는 이벤트를 순서에 따라 정리해보겠습니다 🙂
<button onClick={this.handleColor}>Click</button>
버튼 태그에 있는 onClick 이벤트는 → 이 버튼을 클릭하면 this(=이 State 컴포넌트)에 있는 handleColor 라는 함수를 실행시켜준다.
onClick 이벤트의 발생으로 this.handleColor라는 함수가 실행된다. 이 함수는 this.setState를 실행해주는 함수이다.
setState 함수가 실행되면, this.setState({color: 'blue'})
→ this.state 에서 key가 color인 값이 'blue' 로 변경된다.
state가 변경(업데이트)가 되면 자동으로 render함수가 호출된다. render함수에는 화면에 보여줄 요소들이 jsx문법의 형태로 들어있는것이며, state가 바뀌었기 때문에 변경된 새로운 state 값을 반영해서 화면에 보여준다.
결국 이 과정에서는 <h1>
태그의 글자 색상이 blue로 바뀌게 되었다 👀