TIL_41_with Wecode 031 React
state?
뜻 그대로 컴퍼넌트 내부에서 가지고 있는 컴퍼넌트의 상태값.
화면에 보여줄 컴퍼넌트의 UI 정보를 지니고 있는 객체.예시) class형 컴퍼넌트에서 state를 정의
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;
클래스형 컴퍼넌트 안에는 필수적으로
render
함수가 필요하고 화면에 나타내고 싶은JSX
요소가return
문 안에 들어가있다.
render
함수 위의constructor
함수는state
를 설정할 때 작성해줘야 하는 함수이다. 그리고 constructor 메소드 안에는super()
를 호출해야 한다.
예시) state 객체
this.state = { color: 'red' };
컴퍼넌트의
state
는 객체다.
그래서, 객체 안의 key 이름은 원하는대로 설정할 수 있다.
위의 코드에서 알 수 있듯이 color key의 값으로 “red” 를 value로 지정하였다.
state 사용 예시
state에서 상태값을 설정하는 이유는 컴퍼넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 화면에 나타내기 위함이다!import React, {Component } from 'react'; 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;
h1의 글자색을 위에서 설정한 state 값으로 설정해주고 싶은 경우,
dot notation 을 사용하여 객체의 특정 키 값에 접근하여 그 값을 color 속성의 value로 지정해준 것이다.
// this : 해당 컴포넌트
// this.state : 해당 컴포넌트의 state 객체
// this.state.color : state 객체의 특정 key(color)값. 즉 "red"또 하나, jsx 코드 사이에 자바스크립트 코드를 사용하고 싶다면, { } 로 감싸줘야 한다.
위의 코드를 보면<h1 style={{ color: this.state.color }}>
중괄호에 두 번 감싸져 있다.
이유는, 자바스크립트 문법을 사용하기 위해 {} 한번,
거기에 스타일 속성명과 값을 적으려면 객체 방식으로 써줘야하기 때문에 {} 한번 더 쓰여진 것이다.
참고 사이트
참고 사이트
Event 와 setState
import React, { Component } from 'react'; 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
즉 현재 컴포넌트(State)의handleColor
함수 실행.handleColor
함수 실행 시setState
함수 실행 - state의color
값을'blue'
로 변경render
함수 호출- 바뀐 state 값을 반영하여
<h1>
태그 글자 색상 변경
State.js 파일을 만들어주었다. this는 컴퍼넌트 자체를 가리키는 것.setState
안에는 우리가 바꾸고자 하는 state 객체를 넣어주면 된다.
setState
는state
를 업데이트 시킬 수 있다.
새로 scss 파일을 만들어주고 색상을 지정.
Routes.js 파일에 import 해주고 경로도 지정해주었다.
클릭을 누를 때마다 글씨의 색깔이 바뀌는 것을 볼 수 있다.
온클릭 이벤트는 온클릭 안에있는 함수를 실행한 것 뿐. -> 온클릭 안에 있는 함수는 state의 값을 바꿔주는 함수. 그리고 h1은 오직 state 상태만을 바라보고 있음.
Author And Source
이 문제에 관하여(TIL_41_with Wecode 031 React), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@poohv7/TIL41with-Wecode-031-React저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)