React 기초_4

Q 버튼을 누르면 첫째 제목이 '마카롱 맛집 추천'으로 변경

먼저 수정된 [데이터]를 만들기
근데 원본인 state를 수정하면 안됨. (특히 state가 Array, Object 자료형이라면)
state의 복사본을 만들어서 수정하는 걸 추천

var newArray = 글제목; 이건 복사가 아니라 값을 공유하는거라 복사가 아님!
state 복사를 하기 위해서는 deep copy로 해야함.
*deep copy: 값 공유x, 서로 독립적인 값을 가지는 복사법

<Array, object state 데이터 수정 방법>
일단 변경함수를 써야함, 변경함수(대체할 데이터)
state는 직접 건들지 말고 deep copy를 이용해서 만들기!

function 제목바꾸기(){
   var newArray = [...글제목];
   newArray[0] = '마카롱 맛집 추천'
   글제목변경( newArray );
 }

<button onClick={ 제목바꾸기 }>버튼</button>

1. 일단 기존 state 카피본 만들고 =>[...글제목];
2. 카피본에 수정사항 반영하고
3. 변경함수()에 집어넣기!

Component 만드는 법

1. 함수 만들고 이름짓기

function Modal(){
  return (
    <div></div>
  )
}

2. 축약을 원하는 HTML 넣기

function Modal(){
  return (
    <div className="modal">
    <h2>제목</h2>
    <p>날짜</p>
    <p>상세내용</p>
  </div>
  )
}

3. 원하는 곳에서 <함수명/> 넣기

  <Modal></Modal> = <Modal />

Component 유의사항
1. 이름은 대괄호로 시작 modal(x) Modal(o)
2. return() 안에 있는 건 태그 하나로 묶어야 함. div 하나로 묶어야함!
return() 내부를 묶을 때 의미없는

function Modal(){
 return (
   <>
   <div className="modal">
   <h2>제목</h2>
   <p>날짜</p>
   <p>상세내용</p>
 </div>
 <div></div>
 </>
 )
}