state가 array/object일 때 변경하는 법 , React 기초

저번 숙제 한것과 다르게 강의에서는 변수값들이 많아진다면 더 효율적인 법을 찾고자 이렇게 설명하셨다

https://www.youtube.com/watch?v=jAFogNao6CA 

 

//   //5강 숙제, 버튼을 누르면 글제목 가나다순으로 정렬

  function App() {
    //4강 숙제, 버튼을 누르면 첫 글이 '여자코트 추천'으로 바뀌는 기능 만들기

  
    let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
    let [날짜] = useState('2월 17일 발행');
    let [추천, 추천변경] = useState(0);
    let [글추가, 글추가변경] = useState('여자코트추천');
  
    return (
      <div className="App">
  
        <h1>{글제목[0]}
          <button onClick={() => {
             let copy= [...글제목];
             copy[0] = '여자코트 추천';
             글제목변경(copy)
             }}> 변경 </button>
        </h1>
        <h1>{날짜}</h1>
        <h1>{글제목[1]} <span onClick={() => { 추천변경(추천 + 1) }}>👍</span>{추천}</h1>
        <h1>{날짜}</h1>
        <h1>{글제목[2]}</h1>
        <h1>{날짜}</h1>
      </div>
    );
  }

export default App;

        <h1>{글제목[0]}
          <button onClick={() => {
             let copy= [...글제목];
             copy[0] = '여자코트 추천';
             글제목변경(copy)
             }}> 변경 </button>
        </h1>

...arr를 사용하여 새로운 배열을 만든 뒤 '여자코트 추천'을 [0]자리에 있는 '남자코트 추천'과 바꿔주고

다시 copy를 출력한다

 

[...]을 안쓰면 여자코트추천만 들어가고 나머지는 값 없이 나온다

 

++추가로

Array와... 화살표 함수 설명을 너무 잘해주셔 아래 링크에서 보시는게 더 편할것같습니다

 

코딩애플

https://codingapple.com/unit/react-5-setstate-homework-edit-button/?id=2305 

array, object state 변경하는 법 - 코딩애플 온라인 강좌

 

---

5강 숙제입니다

 

            {/* 5강 숙제, 버튼을 누르면 글제목 가나다순으로 정렬*/}
             <button onClick={() =>{
               let copy = [...글제목];
               copy.sort();
               글제목변경(copy)
             }}>가나다정렬</button>

sort() 가나다순 정렬;

여기도 ...arr 이용하여 새로운 배열을 만들고 거기서 정렬을 했다