React.js / 01 + 02 / 기초-3

✅ React Hook ⭐⭐⭐

• 기존 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도와주는 기술

• 미리 컴포넌트에 적용 될 기능을 만들어 놓고 / 필요할 때 불어와서 쓰는 기법

• 함수형 컴포넌트에서 화면을 효율적으로 다룰 수 있는 라이브러리

---

[必] 함수호출 VS 함수선언

• 함수호출 : 만들어진 함수를 내가 호출해서 쓰겠다.
• 함수선언 : 내가 함수를 만들겠다.

[개념 必]

처음 생각 : 🔴setState 함수 ( 변경할 값 )🔴 <- 이게 함수면,

function ~~ 시작 이라던가, { } 라던가, 화살표 함수란던가 있어야 하지 않나?..


[ 👨‍🏫 ] 

* 함수선언 / 함수호출 개념의 혼돈으로 착각 !!

import { useState } from 'react'; 👈 이 라이브러리를 가져 온다

* 라이브러리에 이미 함수가 만들어져있음 !! 
* 만들어진 함수를 호출만 했기 때문에 함수(변경값) 으로 사용 !!

---

✅ State

: 컴포넌트 내부에서 관리되는 변경이 가능한 데이터
: 일반 변수는 값이 바뀌면 출력이 안 된다 !

console.log() 로 확인하면, 숫자가 정상적으로 증가하지만,
실제로 보이는 화면에서는 숫자가 변함이 없음

그럼 어떡하는데 !! 🥹🥹🥹

① import { useState } from 'react ;

: 라이브러리 불러온다.
: useState : state 변수를 만들 수 있는 기능

② const[state변수명,setState함수] = useState(초기값) ;

• state 변수 : 바뀐 값으로 사용자에게 보여줄 수 있는 특별한 변수

• setState(변경값) : state 변수를 => 변경값으로 바꾼다.

• state 변수는 일반 연산자 ❌❌ / setState함수로만 변경 ⭕⭕

---

⚠️ setState 함수 특징 !!

1. 클로저 함수이다

: 제일 마지막에 실행 되어지는 함수

---

2. 실행마다, 재랜더링(초기화)

: 값을 갱신하면서 재랜더링 된다.

---

[ 📄 오답풀이 ]

setState함수(변경될 값) => 변수에 할당해야지  ❌❌❌

함수호출임 /  할당 ❌ / ≒ console.log() / 리턴데이터 ❌

➕ 클로저 함수다. (젤 마지막 실행)

---

[ ⚙️코드 디벨롭 ]

* 이벤트 객체와 이벤트 타겟의 특성을 이용하여 바로 값을 state 변수에 할당