State

1. State란?

지금까지 우리가 리액트 컴포넌트를 만들 때는, 동적인 부분이 하나도 없었다. 값이 바뀌는 일이 없었기 때문이다. 이번에는 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할 수 있는지에 대하여 알아보겠다.

 

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 이번에는 useState 라는 함수를 사용해보게 되는데, 이게 바로 리액트의 Hooks 중 하나이다.

 

바로 예제를 보면서 이해하면 될 것 같다. 가장 많이 쓰이는 count 예이다.

 

[index.js]

import React from 'react';
import ReactDOM from 'react-dom';
import MyMain from './MyMain';

ReactDOM.render(
  <React.StrictMode>
    <MyMain/>
  </React.StrictMode>,
  document.getElementById('root')
);

 

[MyMain.js]

import React, {Component} from 'react';
import { MyHeader } from './MyHeader';
import MyNavi from './MyNavi';
import Counter, {PrintImage} from './MyBody';

export default class MyMain extends Component {
    render() {
        return(
            <>
              <MyHeader/>
              <MyNavi/>
              <Counter/>
              <PrintImage/>
            </>
        );
    }
}

 

[MyHeader.js]

import { Component } from "react";

class MyHeader extends Component {
    // 클래스 멤버 변수
    // myStyle = {
    //     backgroundColor:'blue',
    //     color:'white'
    // };
    // -> style={this.myStyle}

    // 클래스 멤버 함수는 function 생략
    func() {}

    render() {
        return(
            <div>
                {/* 스타일 지정 시, '-'가 아니라 낙타법을 사용해야 함 */}
                <h1 style={{backgroundColor:'blue',
                color:'white'}}>Header</h1>
            </div>
        );
    }
}

export {MyHeader};

 

[MyBody.js]

import {useState} from 'react';
import FClass from './Images/1.jpg';

// default는 무조건 하나만 쓸 수 있음
/*export default*/ function Counter() {

    // State : 리액트에 맞게 변수를 저장하는 키워드(Hook)
    // 일반변수, 배열, 오브젝트, 클래스 다 넣어도 됨
    // [변수, 함수(Setter)]의 형태로 사용!
    // 값이 실시간으로 바뀌고 그 상황을 반영해야 하는
    // 변수(상태)들은 반드시 useState를 써야 함
    // 값 변경할 때는 setter를 이용해야 함

    // Destructuring
    let [cnt, setCnt] = useState(0);
    let clickProc = () => {
        setCnt(cnt + 1);
    };


    // state 변수는 값을 직접적으로 변경할 수 없음
    // stateSample[0] = 10;


    return (
        <div>
            <p>Count: {cnt}</p>
            {/* Arrow Function */}
            <button onClick={clickProc}>
                Count Up
            </button>
        </div>
    );
}

function PrintImage() {
    return (
        <div>
            {/* 이미지를 경로를 입력해서 사용하려면 public 폴더에
                해당 이미지(폴더)를 넣어야 함 */}
            <img src="/Images/1.jpg"></img>
            <img src={FClass}></img>
        </div>
    );

}

export {Counter as default, PrintImage};

 

[MyNavi.js]

// 클래스 컴포넌트, 함수형 컴포넌트
// -> 사용자 정의형 태그
// -> 클래스명, 함수명은 대문자로 시작!!!
function MyNavi() {

    const memberTag = <h1>memberTag</h1>;

    const navName = [];

    // 반복문
    for (let i = 0; i < 5; ++i) {
        let item = 'Navigation Item' + (i + 1);
        navName.push(item);
        navName.push(' | ');
    }

    return(
        <nav>
            <p>{navName}</p>
            {memberTag}
        </nav>
    );
}

export default MyNavi;

 

[출력값]

 

Count Up 버튼을 누르면 1씩 증가하는 것을 확인할 수 있을 것이다.