react - Hook

react를 이용하여 프로젝트를 해보면서
무작정 사용하는 것이 아닌 깊이있게 어떠한 원리로 인해
동작하는지 또는 이것을 동작시키기 위해선 어떠한 코드가 필요하는지에 대해 알아보고자 정리를 시작하게되었다

- class

클래스 컴포넌트에서는 생성자에서 state를 정의하고 setState함수를 통해 state를 업데이트
하게 된다

- function

기존 함수 컴포넌트는 이러한 state를 정의해서 사용하거나 컴포넌트 생명주기에 맞춰
실행 되도록 할 수 없기 떄문에 나온것이 바로 훅(Hook)이다

Hook

• 이러한 훅의 이름은 모두 use로 시작한다

1. useState

• state를 사용하기 위한 훅이다

안되는 예시//

import React,{useState} from "react";
function Counter(props){
	var count = 0;
    return(
    	<div>
        	<p> 총 {count}번 클릭 </p>
            <button onClick = {() => count++}>클릭</button>
        </div>
    )
}
ReactDOM.render(
			<Counter />,
            document.getElementByid('root')
     

즉 , 이떄 useState를 사용한다

const[변수명 , set변수명] = useState(초기값);

즉 이를 사용하고 수정을 해보면 ,,

import React,{useState} from "react";
function Counter(props){
	const [count,setCount] = useState(0);
    return(
    	<div>
        	<p> 총 {count}번 클릭 </p>
            <button onClick = {() => setCount(count+1)}>클릭</button>
        </div>
    )
}
ReactDOM.render(
			<Counter />,
            document.getElementByid('root')
     

이렇게 하면 된다

https://thinkmath2020.tistory.com/3536

2.useEffect

• 사이드이펙트를 수행하기 위한 훅이다
  여기서 사이드이펙트는 사전적인 의미로는 부작용이라는 뜻을 가지고 있다
  즉 , 개발자가 의도치 않은 코드가 실행되면 버그가 발생하는데 이때 사이드이펙트가
  발생했다고 한다
  useEffect는 리액트의 함수 컴포넌트에서 사이드이펙트를 실행 할 수 있도록 해 주는 훅으로
  사용법은 다음과같다

useEffect(이펙트함수 , 의존성배열);

-> 의존성 배열안의 변수중에서 하나라도 값이 변경되었을 떄 이펙트 함수가 실행된다

-> 이펙트 함수는 컴포넌트가 랜더링 된 후와 업데이트로 인한 재렌더링 된 이후에
실행되는데 , 마운트와 언마운트시 한번만 수행되게 하고 싶으면
의존성 배열에 빈배열([])을 넣으면 된다

예제 코드//

function Counter(props){
	const [count,setCount] = useState(0);
    useEffect(() => {
    		document.title = `총 ${count}번 클릭했습니다`
    }
    );
    return(
    	<div>
        	<p> 총 {count}번 클릭 </p>
            <button onClick = {() => setCount(count+1)}>클릭</button>
        </div>
    )
}

1.랜더링 될때마다 실행되는 것
2.한번 마운트 될떄만 실행
3.특정값이 변경될떄만 실행되는것

-useEffect쓰임 정리본

https://tocomo.tistory.com/32

더 나은 개발이 되길 바라며:)