[React] state / useState / useEffect

State는 하나의 컴포넌트 안에서 전역 변수처럼 사용한다.

 

여기서 전역변수는 component를 의미한다. 곧 JS로 이야기하면 JSON과 function을 의미한다.

 

React 대표적인 hook 함수에는 useState()와 userEffect()가 있다. 이러한 훅이 존재하는 이유는 함수형 컴포넌트에서 state와 같은 생명주기 함수와 같은 기능을 사용하기 위해서 HOOK을 사용한다.

 

 

 

import React, { useState, useEffect } from 'react';
 
const ReactHook = () => {
    const [contents, setContent] = useState('[THIS IS REACT]');
 
    useEffect(() => {
        console.log('userEffect');
    });
 
    return (
        <>
            <div style={{ padding: '0px' }}>
                <h2>{contents}</h2>
                <button onClick={() => setContent('[THIS IS HOOK]')}>버튼</button>
            </div>
        </>
    );
};
export default ReactHook;
 

 

 

 

useState() 함수 : state 변수값을 선언 및 할당한다. 이때 두 가지 인자가 선언된 배열이 반환된다. 첫 번째 인자 contents는 state 변수명, 두 번째 인자 setContent는 state 변수값을 변경해주는 함수다.

 

useEffect() 함수 : 생명주기 함수 componentDidmont()와 같이 return 되는 html 코드들이 화면에 그려진 이후에 실행된다. 최초 페이지가 로딩될 때 한 번 실행되고 setContents()함수로 state 값이 변경되면 한 번 더 실행된다.

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어