[리액트 React] hook 사용 / useState() / useEffet() 사용하기

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 리액트 Hook에 대해 다뤄볼 건데요.

참고로, Hook은 함수형 컴포넌트에서만 사용한답니다.

 

자, 지금부터 hook 중에서도 useState와 useEffect를 어떻게 사용하는지 코드를 봐볼까요?

 

1. App.js 작성하기

import React from 'react';
import './App.css';
import Hook from './Hook';

function App() {
	return(
		<div>
			<Hook />
		</div>
	)
}

export default App;

 

 

 

 

2. Hook.js 작성하기

• useState, useEffect를 사용하기 위해 맨 상단에 import하기
• useState()를 통해 변숫값을 선언하고 할당해 주세요.
  여기서 contents를 초기에 설정한 변숫값, setContents는 변경할 변숫값을 담습니다.

import React, { useState, useEffect } from 'react';

function Hook(props) {
    const [ contents, setContents ] = useState('리액트 Hook');

    useEffect(() => {
        console.log('useEffect');
    })

    return (
        <div
            <h2>{contents}</h2>
            <button onClick={() => setContents('리액트 Hook 사용')}>버튼</button>
        </div>
    )
}

export default Hook;

 

 

 

3. 브라우저 확인

여기서 '버튼'을 클릭하면 아래 이미지처럼 글자가 바뀐다.