[REACT] 리액트를 다루는 기술- Hook(1)

'Velopert'님의 '리액트를 다루는 기술' 서적 8장을 참고하여 정리한 글입니다.

📚React

📗Hook(1)

• React Hook이란 React v16.8에 새로 도입된 기능으로 기존 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줌

📌useState

• 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌
• 사용법

import {useState} from 'react';

const[value,setValue] = useState(0);

• UseState함수의 파라미터에는 기본값을 넣어줌, 현재'0'을 넣어준부분이 이에 해당하는데 이는 기본값을 0으로 설정하겠다는 의미
• ⭐배열의 첫번째 원소는 상태 값, 두번째 원소는 상태를 설정하는 함수
• 상태값이 변화하면 컴포넌트가 리렌더링 됨
• 하나의 useState함수는 하나의 상태 값만 관리 할 수 있음
• 여러 개의 상태를 관리하기 위해서는 여러 개의 usestate 사용

• 예시

const Info=()=>{
  	const [name,setName]=useState('');
	const [nickname,setNickname]=useState('');
	return(
      <div>
      	<input value={name} onChange={(e)=>{
      		setName(e.target.value);
    	}} />
		<input value={nickname} onChange={(e)=>{
      		setNickname(e.target.value);
    	}} />
		<div>
          이름 : {name}
		</div>
		<div>
          닉네임 : {nickname}
        </div>
      </div>
	)
}

📌useEffect

• 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있음
  
  

1. 마운트될 때만 실행하고 싶을 때

• useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트 될때는 실행하지 않으려면 함수의 두번째 파라미터로 비어있는 배열 입력

  UseEffect(()=>{ },[]);

  
  

2. 특정 값이 업데이트될때 만 사용하고 싶을때

• 두번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값 입력

  //name이라는 값이 변경이될때 UseEffect함수가 실행
  UseEffect(()=>{ },[name]);

  
  

3. 뒷정리, 찌꺼기 청소

• 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup)함수를 반환

  //name을 가지고 있는 컴포넌트가 사라질때, return()실행되어 'cleanup'출력, 나타날때 'start'출력
  useEffect(()=>{
    console.log("start")
    return()=>{
    	console.log("cleanup")
    };
  },[name])

• 만약 언마운트될 때만 뒷정리 함수를 호출하고 싶다면 useEffect 함수의 두 번째 파라미터에 비어있는 배열 입력

  useEffect(()=>{
      console.log("start")
      return()=>{
          console.log("cleanup")
      };
    },[])

문득 이런생각이 들었다. 이건 언제 사용하지?