TIL 49 | State & Event
React는 View
를 담당하는 라이브러리이다. 그리고 리액트는 component들로 이루어졌다고 볼 수 있는데, component란 재사용가능한 UI 요소의 최소단위이다. React, UI, 보여지는 것! 항상 이 부분을 염두에 두고 리액트를 공부해야 이해하기 좋은 것 같다! ✨
State
state 는 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트 UI의 상태값을 의미한다. 그래서 화면에 보여줄 컴포넌트의 UI정보를 객체형태로 가지고 있다.
state는 컴포넌트 내에서 정의하고 사용하면서 그 상태데이터는 얼마든지 변경될 수 있다. 👏🏻
1. state 정의하기
state는 object 형태로 되어있으며, 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있다.
① class component에서 정의하기
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 안에서 작성해 준다.- 그리고 이 render 함수 위에 constructor 함수가 있다.
- state는 constructor 함수 안에서 설정해준다! ✨
- 그리고 this.state 값에 컴포넌트의 초기 상태값을 설정해준다. ✨
② state 형태
this.state = {
color: 'red'
};
- component의 state는 객체이다.
- 객체 안의 key 이름은 원하는대로 설정해줄 수 있다.
2. State 사용 예시
🤔 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 = { }
this.state = {
color: 'red'
};
- 우선
this.state
객체는 super() 메소드 다음으로 온다. - state 객체 안에는
key - value 짝
으로 데이터가 들어있다. - value에는 string 뿐만 아니라 배열, boolean 타입 등 여러 종류의 데이터 타입이 올 수 있다.
② this.state.key
<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')
3. Event & setState
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
setState 함수가 실행되면, this.setState({color: 'blue'})
→ this.state 에서 key가 color인 값이 'blue' 로 변경된다.
④ render 함수 호출
state가 변경(업데이트)가 되면 자동으로 render함수가 호출된다. render함수에는 화면에 보여줄 요소들이 jsx문법의 형태로 들어있는것이며, state가 바뀌었기 때문에 변경된 새로운 state 값을 반영해서 화면에 보여준다.
결국 이 과정에서는 <h1>
태그의 글자 색상이 blue로 바뀌게 되었다 👀
Author And Source
이 문제에 관하여(TIL 49 | State & Event), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@saemsol/TIL-49저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)