Hook, useState, useEffect 이해하기

요약

Hook	함수형 리액트 (화살표함수 사용)
useState	const [getter변수, setter변수] = useState(변경할 값 또는 공식) getter변수 : 실행되는 반환값 setter변수 : update되는 값
useEffect	무조건 렌더링 후 한번은 실행. 혹은 지정값 변경시마다 실행.  useEffect(()=> {}, []); 또는 const [name, setName] = useState(); useEffect(()=> {}, [name]);

 

 

Hook

Hook의 개념 : 함수형. 요즘쓰는 화살표 함수는 전부 hook이라 보면 됨

	리액트	리액드 훅
형태	클래스형	함수형
로직	복잡함	비교적 단순
컴포넌트 재사용	어려움	용이
코드	긺	비교적 짧음

Hook의 사용

기본 사용형식

import React from 'react'

const 변수이름 = () => {
	return(
    	<View>
    );
}

export default 변수이름;

// return( ) 안에 사용하는 코드는 JSX라고 하며 자바스크립트 코드로 작성한다.
// ES6의 화살표함수를 사용한다.

간소화 형식 (변수나 함수를 정의하지 않을 때 사용. 즉, 즉각 리턴을 요구할 때 사용)

import React from 'react';

const 변수이름 = () => <div>hello</div>

export default 변수이름;

 

------------------------------------------------------------------------------------------------------------

 

useState

: 기본적으로 getter와 setter변수를 필요로 한다.

  getter : 변수의 값을 가져오는데 사용 (앞의 변수)

  setter : 변수의 값을 변경하는데 사용 (뒤의 변수)

기본 형식
const [name, setName] = useState();

여기서 name이 getter, setName이 setter임. setter표시를 위해 변수이름에 set을 붙임.

const [name, setName] = useState();
//아무런 값 없이 초기화 하는 방식

const [name, setName] = useState(10);
// 숫자 int 계열의 초기화 방식

const [name, setName] = useState('');
// 문자 str 계열의 초기화 방식

* 일반적으로 기본형식 사용 (추후에 타입스크립트로 타입 설정하면 되기 때문)

 

  1. 값을 이용할 때는 첫 번째 변수를 사용

console.log(name);

  2. 값을 바꾸거나 새로 할당할 때는 두 번째 변수를 사용하며 , 함수처럼 괄호 안에 값을 지정해줌

setName("변경할 변수의 값")

  예시) 버튼을 눌면 숫자가 하나씩 올라가는 Number.js의 코드

import React, {useState} from 'react'

const Number = () => {
	const [number, setNumber] = useState(0); // 값을 0으로 초기화
    const counter = () = setNumver(number + 1)  //클릭마다  + 1
    return (<div>
    			<button onClick = {counter}>click</button>  // 클릭버튼
                <div>{number}</div>  // 중괄호 안에 number를 입력
            </div>
    );
}

export default Number;

 

------------------------------------------------------------------------------------------------------------

 

useEffect

: 렌더링, 변수, 오브젝트 등이 변경되면, 그것을 인지하고 업데이트 해주는 함수.

 

1. 작동조건 : 값이 변경되면 실행됨

  1) 페이지가 처음 렌더링 되고 난 후 무조건 한 번 실행됨.

  2) useEffect에 배열로 지정한 useState의 값이 변경될 때마다 실행됨.

 

2. 사용방법

useEffect(()=> {});

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

const [name, setName] = useState();
	useEffect(()=> {}, [name]);

  1) useEffect의 기본형태 : 거의 사용안함. Dependency가 없기 때문에, 시시때때로 발동되서 불필요한 실행이 많아짐.

  2) useEffect를 렌더링 후 단 한번만 실행하고 싶을 때 : 콜백 함수 뒤에 배열을 나타내는 대괄호가 붙어있음.

     일반적으로 이곳에 Dependency를 지정하나, 암것도 없으면 렌더링 후 한번만 실행하고 이후 실행안됨.

  3) useEffect를 렌더링 후 한번, 이후 배열 안의 변수값이 변할 때마다 실행