240820 18주차 화요일 - React 02

훅(Hook)은 React 16.8부터 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와
라이프사이클(lifecycle) 기능을 사용할 수 있도록 해줍니다. 훅을 사용하면 클래스 컴포넌트
없이도 상태 관리와 다양한 기능을 구현할 수 있습니다. 기본적으로 제공되는 훅과 사용자 정의
훅(Custom Hook)을 사용할 수 있습니다.
기본 훅
1. useState
 ○ 설명: 함수형 컴포넌트에서 상태를 관리할 수 있도록 해주는 훅입니다.
 ○ 변수에 값이 변경되면 화면을 다시 그린다

 

 2. useEffect
 useState는 변수에 값이 변경되면 화면을 다시그리기 위해서 사용하고 useEffect는
변수의 값이 변경되면 특정로직을 실행하기 위해서 사용한다.
 import React, { useState, useEffect } from 'react';
 // SimpleEffectComponent 컴포넌트 정의
const SimpleEffectComponent = () => {
 useEffect(() => {
 console.log('컴포넌트가 화면에 나타났습니다!');
 // 클린업 함수
return () => {
 console.log('컴포넌트가 화면에서 사라졌습니다.');
 };
 }, []); // 빈 배열로 인하여 처음 렌더링될 때만 이펙트 실행
//내부적으로 생성해 놓는 작업이 있어서 생각과 다르게 실행된다.
 return (
 <div>
 <h1>Simple Effect Component</h1>
 <p>콘솔에서 메시지를 확인해 보세요.</p>
 </div>
 );
 };
 // App 컴포넌트 정의
const App = () => {
 const [show, setShow] = useState(true);
 124
return (
 <div>
 <button onClick={() => setShow(!show)}>
 {show ? 'Hide' : 'Show'} Simple Effect Component
 </button>
 {show && <SimpleEffectComponent />}
 </div>
 );
 };
 export default App