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

[🌌] useState 함수 (함수호출)

• React 내부에서 변경한 값이 화면에 보이는 데이터
• 일반 변수는 값이 변경 되어도 화면에 반영 X

1. 클로저 함수이다

• 제일 마지막에 실행 됨 (위에 있어도)
  
  

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

• 값을 갱신하면서 재랜더링
  
  

3. 불변성 😔

• 이전 상태를 수정 하지 않고, 새로운 상태를 설정 및 방식

 상태를 변경할 때, 이전 상태를 '직접 수정 하지 않고'

 '새로운 객채를 생성'하여 상태를 갱신하는 원칙
 
 * for 효율성, 성능 최적화
 
 [📚] useEffect 사용하면, 랜더링시 가장 제일 먼저 실행 되는 리엑트 훅 기능 !
 state 특징으로, 이전 값과 동일하게 변경시, 재렌더링 하지 않는 다는 법칙으로
 🔴무한 재랜더링🔴을 방지해준다.

이전값(초기값) ＝ 새로운 값 : 그대로 사용 (🔴무한 재렌더링 방지)
이전값(초기값) ≠ 새로운 값 : 새로운 값을 생성해서 사용
이전값 덮어 씌우기 ❌❌

새로운 값은, 또 다른 새로운 값이 선언 시
▶ 이전값 위치로 들어가서 또 다른 새로운 값과 비교 됨

---

✔️ 불변성 예시 : .concat( )

• 배열.push( ) : 기존 데이터를 수정하면서 불변성 법칙 위반
  : (리턴값 有 : 추가 된 배열의 길이)
• 배열.concat( ) : 새 배열로 반환하기 때문에 (원본 배열 수정 X)

---

✅ React에서 태그 사용하는 방법

① e 이벤트 객채 사용

② document.get 함수 (비효율적, react에서 안 씀)

③ useRef 기능 사용 ------> ⭐제일 권장

---

① e 이벤트 객체 사용

• e : 이벤트 객체

• 이벤트 객체 : 이벤트가 가지고 있는 모든 정보

• e.target : 이벤트를 발생시킨 주체 (이벤트를 발생시킨 태그)

case1) e.target.innerText : 이벤트 발생시킨 태그 객체의 테스트로 할당

case2) e.target.value : 이벤트 발생시킨 태그 객체의 value(input,textarea..) 값 할당

---

② useRef 사용하기 ⭐⭐⭐

• React Hook 中 하나
• DOM 요소에 접근 or 상태 변경시 사용 (= getElement~)

---

[ 실습문제 📚😵 ]

---

✅ .map( )

• 배열의 각 요소에 진입하여, 새로운 배열을 만드는 함수