React - State(상태)

1. State란?

state의 단어 뜻은 상태이다. 즉, component 내부에서 가지고 있는 component의 상태 값이다. 객체의 형태를 가지고 있으며, component 내에서만 정의하고 사용 가능하며, 얼마든지 값이 바뀔 수 있다.

 

---

2. State 설정

(클래스형 component에서 설정방법)

class State extends Component {
  constructor(){
  super();
  this.state = {
  	 testColor: "brown",
     titleColor: "blue",
     test: true,
    };
  }
  render() {
    return(
      //// JSX 내용 ////
    );
  }
}

클래스형 컴포넌트 안에는 기본적으로 render 함수가 필요하고 화면에 나타내고 싶은 JSX 요소가 return문 안에 들어있다.

component 안에 첫 번째 constructor는 component의 생성자 메서드이다. constructor 메서드 안에는 super()를 호출해야 한다.

super()가 호출되면 현재 클래스형 component가 상속하고 있는 리액트의 component 클래스가 지닌 생성자 함수를 호출해준다. 

그다음에는 this.state에 component의 초기 상태 값(위 코드를 보면 testColor, titleColor, test 등)을 설정해준다.

component의 state는 객체이다. 객체 안의 key는 원하는 대로 설정 가능하다. testColor, titleColor, test 등이 key 값이고 그 옆에 선언한 값이 value 값이다. 위와 같이 state는 객체 형태로 설정하면 된다. 

 

---

3. State 예

this.state에 상태 값을 설정하는 이유는 component 안의 요소에서 그 상태값을 반영해 화면에 나타내기 위함이다.

 

 

 

원하는 요소의 글자 색을 component에서 설정한 state 값으로 하고 싶은 경우,

 

JSX 요소에 인라인 스타일을 우선 적용해야 한다. 인라인 스타일 적용은 아래 사진과

 

같이 style = {{ backgroundColor: this.state.oooo}}이다. 여기서 {{}} 중괄호가 2개

 

인 이유는 바깥 괄호는 js코드 괄호이고, 내부 괄호는 css 객체 괄호라 볼 수 있다.

 

상태 값을 정의해준 this.state에는 dot notation을 사용해 객체(state)의 특정

 

key(color) 값에 접근해 그 값을 color로 지정해주면 된다.

 

(예. this.state.testColor)

 

 

 

 

 

 

 

 

style태그를 적용해 글자에 입힌 색을 button을 누르면 색상이 바뀌게끔 구현도 가능하다.

먼저, constuctor()과 render() 사이에 함수를 정의해준다. 정의해줄 때, this.setState({안에}); 처음에 정의해준 상태 값 중 바꾸고 싶은 상태 값의 key값을 입력해주고 바꾸고 싶은 색상 value값을 정의해준다. 그 후 버튼에 onClick 이벤트를 주고 정의해준 함수를 this.정의해준 함수를 적용시키면 된다. 

 

⚠️버튼을 클릭하면 원했던 색상값에 찾아가서 변경되는 것이니, 버튼에 정의해준 함수를 넣어주는 것이다.