React TIL - useEffect, useState, jsx 문법++

 

- Render는 html로 입력받아 해석해서 표준 출력 장치(모니터)로 출력 해 줍니다
위 작업을 Rendering이라고 합니다

useeffect와 usestate 차이?
- usestate: 함수형 컴포넌트에서도 상태(state) 관리를 할 수 있게 해 주는 Hook 입니다.
- useEffect: useEffect는 컴포넌트의 상태값 변화에 따라 컴포넌트 내부에서 변경이 이루어져야 되는것들을 처리할 수 있다.

** useeffect 정확히 어떤 상황에서 사용하는지?
mount update unmount 될 때의 상황을 관리하고 싶을 때 사용하는 게 useeffect

useeffect가 인자를 받는 종류는 2가진데
1. callback만 받는 것과 == 컴포넌트가 맨 처음 화면에 렌더링될 때, 다시 렌더링 될 때 실행 (렌더링이 될 때마다 실행하는 것)
2. callback + dependency array를 받는 것 == 매번 실행x, 맨 처음 화면 렌더링과, 'value값이 바뀔때만'
callback안에는 내가 원하는 작업을 적으면 되고,
dependency array안에는 렌더링 되길 원하는 value값을 적으면 된다

useeffect를 사용하면 clean up 과정이 있어야한다.
그래야지만 말그대로 정리가 되는 것.
-> 타이머를 시작했으면, 타이머를 멈추는 작업을/event listener를 했으면 등록한 리스너 정리작업

useEffect안에 return()=>{}값으로 넣어주면 됨 - 그럼 정리가 됩니다
이렇게 되면 다음(새로운) effect가 실행되기 전에 clean해줌



----------

<label for=''>
이 형식은 html 형식이고 jsx 형식으로 쓴다면 for이 아닌 htmlFor을 써줘야합니다
why? = for은 자바스크립트 언어의 것이기 때문에, jsx에선 htmlFor이라고 쓴다~

-----

document.getelement 어쩌구 쓸 필요 없이
e=>{~~ (e.target.value)} 이런식으로 쓰면 된다.. target에는 많은 정보가 담겨있다.
우리는 그걸 잘 추적하면 되는 것!!
-------
disable = input칸을 막아두는 거
flip = 막은 input칸이 스위칭되는 느낌? 🤨