React - input 숙제 해설

신혜원·2023년 6월 22일
0

React

목록 보기
13/37
post-thumbnail

🖤 숙제1. 버튼을 누르면 유저가 입력한 글을 글목록에 추가하기

  • 원본 보존을 위해 글제목state를 카피했다.
  • array 형태의 state 조작은 카피부터 해야한다!!!💡 (꼭 기억하기)
  • 카피 후 unshift(입력값) 을 해준다.
    unshift : array 자료 맨 앞에 자료추가 하는 문법이다.
  • state변경함수를 사용한다.
  • state를 copy 하니 동작속도도 훨씬 빠르다.
<button onClick={()=>{
      let copy = [...글제목];
      copy.unshift(입력값);
      글제목변경(copy);
    }}>글 발행</button>

🤍 새로고침하면 없어지는 이유

  • 원래 브라우저는 새로고침을 하면 html, js파일을 다시 읽는다.
  • 다시 읽으면 state나 변수도 초기값으로 변경된다.

🖤 숙제2. 글마다 삭제버튼과 기능 만들기

  • map 반복문 안에 버튼을 만든다.
  • 이번에도 array 형태의 state 를 조작하기 때문에 카피를 해야한다.
  • "state에서 글을 삭제해주세요" 라는 코드를 짜야한다.
  • array 에서 x번째 데이터를 삭제하고 싶을 땐 array자료.splice(x,1) 이라고 사용하면된다.
  • map 함수에서 i 는 반복문이 돌 때마다 0에서 1씩 증가하는 숫자이므로 0번째 삭제버튼 누르면 copy.splice(0, 1) 해주니까 0번글이 없어진다.
    1번째 삭제버튼 누르면 copy.splice(1, 1) 해주니까 1번글이 없어진다.
    2번째 삭제버튼 누르면 copy.splice(2, 1) 해주니까 2번글이 없어진다.

0개의 댓글