React의 Hook (useState, useEffect) 첫 걸음

import React, {useState} from 'react';
import Greeting from './components/Greeting';

function App() {
    const [isCreated, setIsCreated] = useState(false);
    

  return (
    <div className="App">
        <button onClick={() => {
            setIsCreated(isCreated ? false:true)
        }}>컴포넌트 생성/제거</button>
        {isCreated && <Greeting />}    
    </div>
  );
}

export default App;

import React, {useEffect} from 'react';

function Greeting () {
    useEffect(() => {
        console.log("컴포넌트가 생성되었습니다.")
    return () => {
        console.log("컴포넌트가 소멸되었습니다.")
    }
    }, []);

    return <h1>안녕하세요.</h1>
}

export default Greeting;

Hook 중 effect와 state에 대해서 기초적인 실험을 해보고 있다.

실행해보면, "컴포넌트 생성/제거" 버튼을 누를때마다 컴포넌트가 생성/소멸 되면서 "안녕하세요"가 나타났다 사라졌다 한다. 물론 개발자도구를 열어보면 "컴포넌트가 생성되었습니다" 와 "소멸되었습니다"가 번갈아가면서 찍힌다.

 

useEffect의 생김새는 useEffect(변경을 감지했을 때 실행할 함수, 변경을 감지할 변수들의 배열) 라고 할 수 있는데,

useEffect(함수, []) 처럼 빈 배열을 넣어주면 컴포넌트가 처음 생성되었을때(1), 그리고 소멸될때(2) 실행된다. 매우 유용하게 쓰일 것만 같은데 빨리 써보고 싶다.

 

{isCreated && } 을 써서 true일때만 컴포넌트를 쓰는 것도 익숙해지고 싶은 재미있는 표현방식.