State

state란 해당 컴포넌트 내부에서 갖고 있는 컴포넌트의 상태값이다.

• 변화할 수 있는 UI 값들을 state에 선언하여 사용

• 객체 형태의 데이터인 state는 key와 value로 구성

• setState()를 이용해 상태에 따라 value값을 다르게 설정하여 UI 정보를 변경
  
  

State 설정 및 Event, setState 활용 예제

1. constructor () {} - Class 컴포넌트의 render() 상단에 constructor 함수를 추가한다.

2. constructor () { super(); } - constructor 내부에 super()를 호출한다.

3. this.state = { titleColor: 'red' }; - this.state에 state를 객체 형태로 설정한다.
   이때 key값은 데이터를 명확하게 설명해줄 수 있는 키워드를 사용해야하며, value값은 해당 컴포넌트의 초기 값으로 설정한다.

4. style={{ color: this.state.titleColor }} - 타이틀 컬러가 실제 UI에 반영될 수 있게 render되는 html에 해당 값을 추가한다.
   (현재 예시에서는 한 곳에서 보여주기 위해 inline으로 변경하였지만 실무에서는 className을 이용하여 scss에서 설정해주는 것이 유지보수 등에 좋다.)

5. <button>타이틀 컬러 변경 버튼</button> - 타이틀 컬러를 변경해주는 함수를 실행시킬 버튼 태그를 추가한다.
   타이틀 컬러 변경 버튼

6. onClick={this.handleTitleColor} - 버튼에 onClick 이벤트를 추가한 후 실행시킬 함수명을 입력한다.

7. handleTitleColor = () => { this.setState({ titleColor: 'blue' }) } - onClick 이벤트에서 설정해준 함수명으로 render() 전에 함수를 선언한다.

class MainPage extends React.Component {
  constructor () {
    super();
    this.state = {
    titleColor: 'red'
    };
  }
  
  handleTitleColor = () => {
    this.setState({
      titleColor: 'blue'
    })
  }
  
  render () {
    <div className="title">
      <h1 style={{ color: this.state.titleColor }}>State란 무엇인가?</h1>
      <button onClick={this.handleTitleColor}>타이틀 컬러 변경 버튼</button>
    </div>
  }
}

export default MainPage;

Props

props란 부모 컴포넌트로부터 받은 데이터를 지니고 있는 객체이다.

• props : properties(속성)
• props를 통해 부모 컴포넌트로부터 state 상태값과 event handler 전달 가능
  
  

Props, State, Event 예제

상단의 MainPage 컴포넌트에서 버튼 요소를 자식 컴포넌트로 분리하여 보자.

1. Button 컴포넌트 파일을 생성하여 Button에 해당하는 html 태그를 옮겨준다.

2. <Button /> - 부모인 MainPage 컴포넌트에서 버튼 태그 위치에 Button 컴포넌트를 추가한다. 해당 작업 전 각각의 컴포넌트에서 export와 import를 진행해주어야 한다.

3. <Button changeTitleColor={this.handleTitleColor} /> - 부모 컴포넌트 내부에서 자식 컴포넌트에 전해줄 키워드와 키워드에 해당하는 state나 이벤트 함수를 설정한다.

4. <button className="button" onClick={this.props.changeTitleColor}> ... - 부모에서 설정한 키워드를 자식 컴포넌트에서 props를 이용해 설정한다.
   
   

<MainPage /> 부모 컴포넌트

class MainPage extends React.Component {
  constructor () {
    super();
    this.state = {
    titleColor: 'red'
    };
  }
  
  handleTitleColor = () => {
    this.setState({
      titleColor: 'blue'
    })
  }
  
  render () {
    <div className="title">
      <h1 style={{ color: this.state.titleColor }}>State란 무엇인가?</h1>
      <Button 
        changeTitleColor={this.handleTitleColor}
      />
    </div>
  }
}

export default MainPage;

<Button /> 자식 컴포넌트

class Button extends React.Component {
  render () {
    <button 
    className="button"
    onClick={this.props.changeTitleColor}
    >
      타이틀 컬러 변경 버튼
    </button>
  }
}

export default Button;