ㄴ ㅏ 의,, React 기본기 다지기는 끝날 때까지 끝난 것이...아..ㅏ아..니다..

코딩알려주는누나 강의를 듣다 보면 좋은 정보들이 참 많은데 기록하지 않으면 잊어버리니까 벨로그에 정리-⭐(개인 공부하는거임..)

✅state를 const로 선언하는 이유?

✔️example

const [counter,setCounter] = useState(0)

=> state는 일반 변수와 달리 setState 함수를 이용하여 값을 변경한다. (이렇게 함수 내부의 변수가 함수 수명이 끝나더라도, 변수의 참조가 계속된다면 그 변수의 수명은 계속된다. 이것을 클로저라고 한다. 이렇게 우린 컴포넌트가 render가 되더라도 state를 기억할 수 있다.

허나, let을 사용하게되면 counter2 = 100과 같은 변수 형식의 할당이 가능해진다. 따라서 이를 방지하고 setState를 사용한 변수 변경만 허락하기위해 const로 선언한다. (const로 선언하면 변수 형태의 재할당을 막을 수 있다.)

---

✅이벤트 처리하기

기존에 HTML에서 이벤트를 처리할 때는 함수를 문자열 형태로 전달을 해주었다.

<button onclick="activateLasers()">
	Activate Lasers
</button>

onClick안에서 HTML에서 전달해 준 것처럼 activateLasers() 이렇게 전달을 하면 이는 함수를 실행하는 문장이기 때문에 이벤트가 발생하지 않았음에도 불구하고 처음에 render 시 바로 호출되버린다. 따라서 ⭐함수를 콜백형태로 전달해 주는 것이 중요하다.⭐

✔️전달해 줄 매개변수가 있는 경우

<button onClick={()=>activateLasers("some value")}>
  Activate Lasers
</button>