[React] 배열 State 변경, Component, 동적 UI 정리

State 변경함수의 특징

• 동작원리

  기존 State와 신규 State를 비교,
  같을 경우 변경 안 함

• array/object State의 경우,
  reference data type이기 때문에
  State 변경시 유의⚠️

  그래서 state를 변경할 때, 기존 state와 주소가 달라져야 함
  ➡️ array/object를 새로 만들어야 한다는 뜻

---

배열 복사

새로 만들려면 일단 복사를 해야된다, 그런데

• array/object 다룰 때, 원본은 보존하는 게 좋음
• let copy = [...array];

  Spread operator (전개연산자)

---

정리

array/object 에 특정 인덱스의 값을 변경해도, 재렌더링이 되지 않음
➡️ State로 설정해둔 값이 array/object의 주소이기 때문

따로 독립적 복사본을 만들어서 수정, 변경해야함✅

변경한 복사본으로 다시 setState

---

Component 가 뭐니

• 복잡한 html 덩어리를 묶어서 하나로 축약시켜 만드는 문법

  코드 이해하기 쉽고, 재사용성 좋을 듯👀

---

Component 쓰는 법

• function 만들기
• return() 안에 html 담기

  하나의 태그에 감싸져 있어야 함

• 사용할 때
  • <컴포넌트명></컴포넌트명>
  • <컴포넌트명/>
• 다른 function 밖에 만들고,
  영어대문자로 시작해야함
• 컴포넌트명 === 함수명

• const Component = () => {
      return (
          <>
              <div>
                  이런 식으로 작성
              </div>
          </>
      )
  }

• import App from './App'; 으로 import

의미없는 div 태그는..

하나의 태그로 감싸져 있어야 해서 div로 감쌌는데, 실제로는 의미없잖아

<> </> 이렇게 간단하게 표기하면 된다
➡️ Fragments 문법

---

언제 Component 쓸까?

• 반복적인 html 축약
• 큰 페이지들 단위로 컴포넌트화
• 자주 변경되는 것들을 쪼개놓을 때
  ➡️ 성능상 좋음, 다 바꿀 거 부분만 변경하니까

  너무 남발하면 안 좋음
  state를 가져다쓸 때 문제가 생김
  state 관리하기 힘들어😒

---

동적인 UI 만드는 법

html css로 미리 디자인 완성

UI의 현재 상태를 state로 저장
➡️ 자료형 상관없이 상태를 표현할 수 있기만 하면 됨
ex) 0, 1, true, false, '열림', '닫힘', ...

state에 따라 UI가 어떻게 보일지 작성

• 조건문 과 같은 방식으로 작성
• 근데 return() 영역 안은 html 이 들어가는 부분이라,
  if 나 for 와 같은 JavaScript 코드를 작성할 수 없음⚠️
• 그래서 ➡️ 중괄호{ }에 삼항연산자 (ternary operator) 를 사용

      {
        조건식 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드
      }

• null 은 비어있는 html으로 자주 사용
  있을 때만 보여주도록

       {
           state == true ? <Component/> : null
       }

---

React적 사고방식

버튼을 눌러 동적으로 UI를 변경할 때,

기존 JavaScript 방식은 버튼 누르면 html을 직접 변경

React에서는 버튼 누르면 state만 변경
➡️ 스위치 같은 느낌

---