[React.js] 5. hook useState

부모  컴포넌트에서 설정하는 props가 아닌 컴포넌트 내부에서 변경 가능한 state를 알아보자.

마찬가지로 함수형 컴포넌트 state만 정리한다.

클래스형과 달리 함수형은 hook 함수를 이용해 상태를 관리한다.

useState

함수형 컴포넌트의 가변적인 상태를 관리하는 함수다.

부모 컴포넌트인 App의 자식 컴포넌트 StateEx를 만들어주었다.

import React, {useState} from 'react';

const StateEx = () => {
    const [name, setName] = useState('김아무개');
    const onClick1 = () => setName("마홍로");
    const onClick2 = () => setName("아무개");

    return (
        <div>
            <button onClick={onClick1}>마홍로</button>
            <button onClick={onClick2}>아무개</button>
            <h1>{name}</h1>
        </div>
    );
};

export default StateEx;

import {useState}를 해주어야 한다.

버튼을 클릭할 때 name 값이 바뀌고 실시간으로 적용된다.

만약 props를 사용한다면 새로운 값을 가진 컴포넌트를 매번 render() 함수로 렌더링 해야했다.

 

이번에는 useState함수를 두개를 사용해 예제를 만들어 본다.

import React, {useState} from 'react';

const StateEx = () => {
    const [FirstName, setFirstName] = useState('김');
    const [LastName, setLastName] = useState('아무개');
    const onClickFN1 = () => setFirstName("마");
    const onClickLN1 = () => setLastName("홍로");
    const onClickFN2 = () => setFirstName("뉴");
    const onClickLN2 = () => setLastName("진스");

    return (
        <div>
            <button onClick={onClickFN1}>성1</button>
            <button onClick={onClickLN1}>이름1</button>
            <button onClick={onClickFN2}>성2</button>
            <button onClick={onClickLN2}>이름2</button>
            <h1>{FirstName+LastName}</h1>
        </div>
    );
};

export default StateEx;

 

마진스가 되어버렸다.

끝으로

예전에 플러터앱을 조금 공부했는데 앱에서 하는 거랑 조금 비슷한 것 같다.

react native 같은걸로 앱도 만들 수 있다던데 기대된다.