useState 와 useEffect

state란
컴포넌트 내부에서 바뀔 수 있는 값

state만들기
state를 만들 때는 useState() 사용

기본셋

const [value, setValue] = useState(초기값)

1. const를 선언하고
2. 빈 배열[]dmf todtjdgkdu
3. 배열 첫번째 자리는 state의 이름, 두번째 자리에는 set을 붙인 state의 이름
4. useState()의 인자에는 이 state의 원하는 처음 값을 넣어줌

state 변경하기

📂 setValue(바꾸고 싶은 값)을 사용한다

사용해보기

1. 버튼다루기

function App() {
	const [name, setName] = useState("길동이");
    
    function onClickHandler() {
    	setName("누렁이");
    }
    
    return(
    	<div>
        	{name}
            <button onClick={onClickHandler}>버튼</button>
        </div>
    )
}

2. INPUT 다루기

const App =() => {
	const [value, setValue] = useState("");
    
    const onChangeHandler = (event) => {
    	const inputValue = evet.target.value;
        setValue(inputValue);
    }
     
    return(
    	<div>
        	<input type="text" onChange={onChangeHandler} value={value}/>
        </div>
    )
}

-> 입력한 input의 값은 event.target.value로 꺼내 사용
-> state인 value를 input의 속성인 value에 넣어주면 !!!
->-> input과 state 연결!

🙂불변성 알아 보기 전 맛보기
state가 원시 데이터 타입이 아닌 객체 데이터 타입인 경우 불변성을 유지해줘야 함!!

---

useEffect는
리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 HOOK.
컴포넌트가 렌더링 될 때 실행된다.

// src/App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

🙂의존성 배열 더 알아보기!!

useEffect(()=>{
	//실행하려는 함수
}, [의존성 배열])

이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게~

useEffect를 사용하는데, 어떤 함수를 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을 [ ] 빈 상태로 넣으면 됩니다.