Today Topic : React element

🗝 Keywords

✅ Component

✅ React.useState()

✅ React.useEffect()

✅ Hook

---

1. Component

🚀 Component

• 컴포넌트란 element들의 집합을 의미함
• component에서는 다양한 hook들을 불러올 수 있음.
• 상태를 관리해주는 값 즉, 변수로 기존 값과, 변환되는 값, 그리고 해당 값의 초기값을 인자로 넣어줄 수 있는 useState()를 이용할 수 있음.
• useEffect()를 통해서 특정한 동작이 변경될 때만 값을 실행함.
• 특정 훅들의 반복은 커스텀훅 useHookname 함수를 만들어서 사용할 수 있음

---

2. React.useState()

🚀 React.useState()

 const [keyword, setKeyword] = React.useState("")
 <p>{typing ? `Looking for ${keyword}...` : result}</p>

• 다시 렌더링을 안해도 자동으로 렌더링을 해줌.
• state 인자는 문자,숫자,함수,배열 다 올 수 있다. 인자가 useState()의 초기값이다.
• state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환한다. 이것이 바로 const [count, setCount] = useState(초기값)
• useState의 인자값은 count의 초기값이 된다.

🚀 localStorage

window.localStorage.setItem("keyword", event.target.value)
window.localStorage.getItem("keyword")

• 입력값을 브라우저 내의 저장공간에 저장하고 싶을 때 사용
• useState의 초기값을 return하는 함수로 넣을 수 있다.
• 딜레이가 걸릴 수 있지만,함수가 실행되면 결과를 받아옴
• localStorage에는 setItem(내보내고 싶은 변수명,내보내고 싶은 값)과 getItem(불러오고 싶은 변수명)이 있다.

---

3. React.useEffect()

🚀 React.useEffect()

React.useEffect(()=>{
  console.log("effect")
  window.localStorage.setItem("keyword", keyword)
}, [keyword, typing]
);

• 사이드 이펙트 = 부작용
• 의도하지 않은 효과(혹은 부수 효과)
• 리액트에서 변경이나 효과가 일어날 때 그 효과를 다른 곳으로 보내주기 위한 훅이다.
• React.useEffect({함수},[배열])을 넣으면 배열에 있는 값이 변할 때만 함수를 실행하는 것.

---

4. Hook

🚀 CustomHook

• 훅들이 반복이 되면 커스텀훅(함수)로 묶어내면서 그 반복을 줄일 수 있음.
  

🚀 HookFlow

• Hook의 실행순서를 아는 것은 굉장히 중요함.
• render가 시작 되면, useEffcet가 실행됨.
  
• render가 시작되고, 변경이 일어나면 render를 다시 실행하는데, 차일드가 시작이 되고, 앱이 한 번이라도 렌더가 되었다면 우선적으로 실행하는 cleanup을 실행하고, 그 뒤에 다시 차일드의 useEffect가 실행이되고, 그 후의 app의 useEffect가 실행됨.
• 즉, useEffect는 자식요소 함수가 먼저 실행이 되고, 그 전에 cleanup을 먼저 한 뒤에 차일드의 useeffect가 실행이되는 것을 보아서 useeffect보다 cleanup은 먼저 실행됨.
  
• 만약 아래 처럼 차일드에 클린업이 있을 경우에는 차일드 useEffect보다 먼저 실행된다.
  
• 만약 클린업이 동시에 실행되면 클린업의 우선순위는 App 즉, 부모요소가 된다.