[💎React] state, component, map

state

array, object state 변경하는 법

import {useState} from 'react}

function App(){
	let [커피,커피변경]=useState(['아메리카노','카페라떼'])
    
    return (
    <>
    <button onClick={()=>{커피변경(['녹차라떼','바닐라라떼'])}}>커피변경버튼</button>
    <h4>{커피[0]}</h4>
    <h4>{커피[1]}</h4>
    </>

는 변경할 항목이 2개니까 망정이지, 100만개였으면 변경될 state 적힌 배열 적느라 내 손목이 먼저 망할 것이다.
리액트는 렌더링을 할 때 얕은 비교를 수행하는(메모리 주소 참조값이 변함을 봄) 녀석인데 우리가 커피[0]='녹차라떼'라고 적는다고 해도 '이전이랑 지금이랑 뭐가 다른건데..?' 갸우뚱거리며 재렌더링해주지 않는다.
그래서 [...]를 이용해 새로운 배열을 생성해낸다.

function App(){
let [커피,커피변경]=useState(['아메리카노','녹차라떼','버블티'])

return(
<>
<button onClick={()=>{
  let copy = [...커피]
  copy[0]='헤이즐넛라떼'
  커피변경(copy)
  //커피변경의 ()안에는 변경할 state값을 넣어주면 된다
  //커피가 아니라 이제 바뀐 copy를 넣어주면 되겠지!!?
}}>커피변경해주는 버튼</button>
<h4>{커피[0]}</h4>
</>

결론: react에서 배열/객체 수정하고 싶으면 독립적인 [...배열] {...객체} 카피본을 만들어서 수정하기

component

를 이용하면 길고 긴 html 을 한 단어로 줄일 수 있다
예를 들어

• 사이트에서 반복해서 출연하는 HTML 덩어리들
• 내용이 자주 변경될 것 같은 Html 부분들
• 다른 페이지를 만들고 싶다면 그 페이지의 html 내용을 하나의 컴포넌트로 만들기

방법

1. function App 외부에서 함수를 하나 만들어주고 작명한다.
   (컴포넌트 안에서 또다른 컴포넌트를 생성할 수는 없다)
2. 그 함수 안에 return() 안에 축약하고 싶은 html 담기
3. function App 내부 원하는 곳에서 <함수명></함수명> 사용하기

state이용해서 동적인 UI만들기(모달창,탭,서브메뉴,툴팁 등등)
1. html, css로 미리 UI 디자인 해두기
2. UI 현재 상태를 state로 저장해두기
3. state에 따라서 UI가 어떻게 보일지 조건문으로 작성
단, JSX에서는 if/else를 사용할 수 없으니 삼항연산자 사용하기!
조건식?참일때 실행될 코드:거짓일때 실행될 코드

연습

function App(){
let [modal,setModal]=useState(false)
return(
<>
<button onClick={()=>{setModal(true)}}></button>
{
modal == true? <Modal> :null
}
</>
}
function Modal(){
return(
 <div>
 <h4>모달입니다</h4>
 </div>
)
}

버튼 누를 때마다 토글처럼 모달창 보였다가 안보였다 하고 싶으면

<button onClick={()=>{setModal(true)}}>면
버튼 누를때 계속 modal state가 true인건데
나는 true -> !true
false -> !false
로 만들고 싶은거니까
setModal(!modal)로 바꿔줬다.

map

똑같은 html 생성하는 또다른 방법으로는 map()을 이용하는 방법도 있다.
안타깝게도 반복문은 JSX에서 사용이 불가능해서 이번기회에 map()을 써보도록 하자!

map?

킹제너럴 mdn에서 map()을 찾아보면
map()메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.라고 친절히 설명해준다.

인수

arr.map(callback함수(a,i))
a 는 처리할 현재 요소
i 는 처리할 현재 요소의 인덱스
세 번째 인수는 오늘 당장은 쓸 일이 없어서 일단 생략.

반환값

배열의 각 요소에 대해 실행한 callback 의 결과를 모은 새로운 배열을 return 해준다

연습

function App(){
let [커피, 커피변경] = useState(["아메리카노", "가페라떼", "녹차라떼"]);
return
커피.map(function(a){
 return(
 <div key={i}> //리액트가 <div>구분하기 위해 이렇게 적어줌
 <h4>{a}</h4>
 </div>)
 )
 }

(근데 이렇게 있으니까 무슨 한글문서에 쓴 거 같네..ㅠㅠ....화면렌더링 한건데!!!!!)

아무튼 이번엔 커피메뉴를 누르면 글자 옆에 좋아요가 0에서 1씩 올라가게 만들고 싶다.
let [좋아요, 좋아요변경]=useState(0) let [좋아요1, 좋아요변경1]=useState(0) let [좋아요2, 좋아요변경2]=useState(0)
뭐 이렇게 각 메뉴마다 state를 만들어줄 수도 있지만, 만약에 메뉴가 100개였다면...?
내 손목 보호를 위해 map 함수를 써보겠다.

function App(){
let [커피, 커피변경] = useState(["아메리카노", "가페라떼", "녹차라떼"]);
let [좋아요, 좋아요변경]=useState([0,0,0])
return
{
커피.map(function(a,i){
 return(
 <div>
 <h4 onClick={()=>{
	let copy=[...좋아요]
    copy[i]=좋아요[i]+1
    좋아요변경(copy)}}>{a}</h4>
 <span>{좋아요[i]}</span>
 </div>)
 )
 }
 }

다시 한번 말하지만, 한글 문서 아니다...ㅠㅠ이거 내가 클릭할때마다 바뀌는데 동영상 첨부는 어떻게 하는걸까? 이것도 한번 알아봐야겠다.

---

• 오늘 새롭게 알게 된 것
  컴포넌트 만들고나서 return()안쓰고 App()에서 계속 불렀는데 안 불러져서 30분동안 헤맸다. 이제 컴포넌트 쓰고나면 return()은 절대 안 까먹을 것 같다.
• 오늘 궁금했거나 더 알고 싶은 것
  array, object같이 참조형 데이터들의 얕은 복사/ 깊은 복사에 대해 더 알면 재밌을 것 같다.
  onClick={}안에 이벤트 2개 넣고 싶은데 한개밖에 안 넣어진다. 아메리카노 글자 눌렀을때 sort()써서 ㄱㄴㄷ순으로 정렬하게 하는 함수도 만들어놨는데 그건 적용이 왜 안되는지 모르겠다. 이것도 내일 해결해놔야지.
• 오늘의 일기
  아 진짜진짜 하기 싫은데, 코드 해결되면 너무너무 기쁘다. 작고 소중한 내 코드~!~!