hooks-1 (useSate, useEffect)

Hooks?

아주 간단히 말씀드리자면

 

class없이 class의 기능(state,life cycle)을 사용하기 위해서(hook)하기위해서 만들어졌습니다!

 

useState

import React,{useState} from "react";
const [test,settest]=useState("10");

test는 10에 값을 가지고 있고 settest를 통해 test값을 변경가능하다.

 

useState에 넣을수있는 값은 제한은 없다.(arry,string,undifend)등등

 

하위 컴퍼넌트에 settest를 넘긴다음에 하위 컴퍼넌트에서 변경해도 test값을 변경 가능하다!

 

useEffect

import React,{useEffect} from "react";

useEffect(() => {
	alert("test");
},[]);

useEffect는 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행됩니다. 하지만 개발자가 원하는 특정 조건들을

 

설정할수있습니다. useEffect(function,[조건]) 이러한 구조를 가지고 있는데 예를 들어 조건안에 state 값을 추가해서

 

state값이 변하는 상황에서만 호출할수도있습니다.

 

!!주의!!

-사용시 유의할점-

 

1.hook는 항상 컴퍼넌트 최상단에서 호출해야합니다

import react,{useState} from "react";

const App=(props)=>{
	const [count,setcount]=useState(0);
    return (
    	<div>{count}</div>
    )
}

export default App;

 랜더링이 될때마다 hook로드 순서가 변경될수있습니다

 

(가독성도 떨어지게 됩니다!)

 

2.react 함수내에서만 hook를 사용해야 합니다.

function Test(){
	const [count,setcount]=useState(0);
    
    return "이렇게 하면 안됩니다!"
}

useSate,useEffect는 이런 실수할일이 많이 없지만

 

나중에 useContext와 같은 다른 hooks를 사용할때 문제가 생길 수 있습니다.

 

 

-첨석-

부족한 글 읽어주셔서 감사합니다!

조금더 자세하게 알고 싶으시면 공식 사이트 및 다른 블로그를 참고해 보세요!

 

-react 공식사이트-

Hook 개요 – React (reactjs.org)

Hook 개요 – React

-참고한 블로그 및 기타여러 사이트-

 

[React Hook] React Hooks란?, Lifecycle의 개념 (tistory.com)

[React Hook] React Hooks란?, Lifecycle의 개념

React의 새로운 패러다임, React Hooks (velog.io)

React의 새로운 패러다임, React Hooks