Hook-1

Hook - 함수 형 컴포넌트에서 사용할 수 있는 기능이다. 

 

Hook의 자주 사용하는 종류 

• useState  - 상태를 관리해 주는 기능
• useEffect - 랜더링 될 때마다 특정 작업을 실행해 주는 기능 
• useRef  -변경 가능한 참조 객체를 생성할 수 있는 저장 공간  
• useMemo -Memoization(메모리화) -성능 최적화하기  위한 기능 
• useReducer - 컴포넌트의 상태 관리  기능 (useState랑 기능 비슷함) 

 

1. useState

 

전체 코드 

export default function UseState01() {

  const[count, setCount] =useState<number>(0);

const[message, setMessage] =useState<string>('안녕하세요');
  const handleUpClick =()=>{
    setCount(prevCount =>prevCount+1);
    setCount(prevCount =>prevCount+1);
    setCount(prevCount =>prevCount+1);
  
  }
    const handleDownClick =()=>{
      setCount(prevCount => prevCount-1);
    }
  
  
  return(
  <div>
    <p style={{color :'blue'}}>useState 최신 상태 관리</p>
    <p>You clicked{count} times</p>
    <button onClick={handleUpClick}>증가</button>
    <button onClick={handleDownClick}>감소</button>
  </div>
)
}

 

useState의 기본 문법  - 외우자 

const[count, setCount] =useState<number>(0);

count: 현재 상태 값 , setCount :상태를 업데이트하는 함수, <number> :타입, (초깃값)

바로 밑에 있는 코드   한번 생각해 보자!

 const handleUpClick =()=>{// 화살표 함수 정의 
    setCount(prevCount =>prevCount+1);  //0+1 =1
    setCount(prevCount =>prevCount+1); // 1+1=2
    setCount(prevCount =>prevCount+1);// 2+1
  
  }

위에 코드를 보면 초깃값 설정을 0으로 해줬으니깐  precCount=0이다.  이 함수를 실행하면  +1을 총 세 번 하니깐 

한번 실행 시 +3을 해준다.

 return(
  <div>
    <p style={{color :'blue'}}>useState 최신 상태 관리</p>// style{{}}이렇게 해야지만 Css을 입력할수있다 
    <p>You clicked{count} times</p>//{count} 값을 나타내기 위한 
    <button onClick={handleUpClick}>증가</button> 
    <button onClick={handleDownClick}>감소</button>
  </div>
)

onClick은 이벤트 요소 하나이다.  클릭이 이벤트가 발생하면 handleUpClick이 실행이다.

 

---

2. useEffect 

기본 구조 1~2개의 인자 값이  필요하다 

첫 번째 : 콜백 함수 - 부수효과를 수행하는 함수 

두 번째 : 의존성 배열, deps 해당 배열의 값이 변경될 때마다 부수효과를 다시 실행

import React, { useEffect, useState } from 'react'
// 서버와 통신 
export default function UseEffect01() {
  const[ count, setCount] = useState<number>(0);
  const[ name, setName] = useState<string>('이승아');
  // useEffedct기본 구조
  // 1~2개의 인자 가 필요하다 
  // 첫번째 인자 : 콜백 함수  - 부수효과를 수행하는 함수 

  // 두번째 인자 : 의존성 배열 ,deps-해당 배열의 값이 변경될 때 마다 부수효과가 다시 실행됨 
  // >> 빈 배열 : 컴포넌트가 마운트 될 때  한번 만 실행 
  //+ 의존성 배열에 값이 있더라도 마운트 시에는 반드시 실행 
  
  useEffect(() =>{
    // 부수효과를 작성 
    console.log(`Count${count}`);
    // 의존 배열에 작성된 데이터의 상태 변화가 일어날 경우 
    //>> 효과를 재실행 
  },[count]);
  
  useEffect(() =>{
    console.log(`Name: ${name}`)
  },[name]);

  useEffect(()=>{// 의존 배열이 아예 없는 경우 모든 랜더링 마다 실행 
    console.log("컴포넌트의 랜더링")
  },[])
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount((prevCount) =>  prevCount+1)}>증가</button>
      <button onClick={() => setCount((prevCount) =>  prevCount-1)}>감소</button>
      <br />
      <p>{name}</p>
      <button onClick={() => setName(name ==="이승아" ? '이도경' : '이승아')}>이름 변경 </button>
    </div>
  )
}

 

useEffect(() =>{
    // 부수효과를 작성 
    console.log(`Count${count}`);
    // 의존 배열에 작성된 데이터의 상태 변화가 일어날 경우 
    //>> 효과를 재실행 
  },[count]);

첫 번째 인자 값: Count${count}  -console.log(\Count${count}`);가 부수효과로 작성됨 

즉, count값이 변경될 때마다 콘솔에 Count와 count 값이 출력된다.

두 번째 인자 값: [count]

 count 값이 변경될 때마다 첫 번째 인자로 작성된 함수가 다시 실행된다.

두 번째 코드 도 한번 생각해 보세요 첫 번째 인자값이 어떤 것이고 두 번째 인자 값이 뭔지를 ~~~

 어떻게  실행되는지도 같이 하면 좋을 것 같다.

 

return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount((prevCount) =>  prevCount+1)}>증가</button>
      <button onClick={() => setCount((prevCount) =>  prevCount-1)}>감소</button>
      <br />
      <p>{name}</p>
      <button onClick={() => setName(name ==="이승아" ? '이도경' : '이승아')}>이름 변경 </button>
    </div>
  )

button태그는 이제 어떤 의미 인지 알죠? ㅋㅋㅋ 모르면  위에 한번 보기!!

setName -  삼항연산자를 이영해서 코드로 작성했습니다. name 이 이승아랑  같으면  참이면 이도경 , 거짓이면 이승아 

로 보내기