React - State & event

State

state 는 화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체
state 안에 들어가는 정보들은 변하는 정보가 들어간다.

import React from 'react';

class Parent extends React.Component{
  constructor(){
    super();
    this.state = {
      titleColor :"red",
      subTitleColor:"blue",
    };
  }
  
  changeTitleColor = () => {
    this.setState({
      titleColor : 'green',
    });
  };

render(){
  const{titleColor, subTitleColor} = this.state;
  
  return(
    <div>
    	<h1 style = {{color: titleColor}}Class Component</h1>
	<button onClick ={this.changeTitleColor}>색바꾸기</button>
    </div>
		);
	}
}
export default Parent;

• component 가 실행될 때 constructor 라는 함수가 있다면 제일 먼저 실행되서 초기화를 담당한다. 그 다음 this.state를 통해 state값을 초기화 시킨다.

• <h1 style = {{color: titleColor}}> 에서 중괄호의 의미는 바깥쪽은 js를 쓰겠다는것을 의미하며 안쪽 중괄호는 객체를 의미한다.

• const{titleColor, subTitleColor} = this.state;는
  구조 분해 할당인데 이는 객체나 배열에 대해 사용한다. 배열이나 객체 안에 들어있는 데이터들을 변수에 할당하는 문법이다.

const obj = {
	name : "tony",
    age : 18,
};

const{name,age} = obj;

-> 키 값이랑 동일하게 변수를 만들어준다. 각각의 변수 name, age 안에는 해당되는 value값들을 저장한다.

• setState 함수를 사용해서 state 값 변경해줘야한다.
  this.state.titleColor = "green"; 이런식으로 해주면 안됨!
  setState 함수를 실행하고 나서 render 함수가 항상 호출되는데 이는 바뀐 state값으로 다시 화면을 그려줘야하기 때문이다.

설명 출처: wecode session

이벤트 처리하기

• React 이벤트는 소문자 대신 camelCase를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

//HTML

<button onclick = "activateLasers()">
  Active Lasers
</button>

//React

<button onClick = {activeLasers}>
	Active Lasers
</button>

-React 에서는 false를 반환해도 기본동작을 방지할 수 없다.
반드시 preventDefault를 명시적으로 호출해야한다.

//HTML

<a href="#" onclick ="console.log('The link was clicked'); return false">
  click me
</a>           

//React

function ActionLink(){
	function handleClick(e){
		e.prevent Default();
        	console.log('The link was clicked');
    	}
        return (
        	<a href="#" onClick={handleClick}>
            	click me
            </a>
        );
}

설명 출처: React 공식문서

다음 게시물에는 westagram을 하면서 직접 짠 코드를 리뷰해봐야겠다.