[React] 글 추가 기능 : onshift()

chxxrin·2024년 4월 2일
0

React

목록 보기
16/32

Q. 버튼 누르면 글 하나 추가되는 기능 만들기

→ 글제목이라는 state에 추가

  • html 직접 하나 만들 필요는 없음.
  • state 하나 추가해주세요~
  • 스위치만 건드리면 UI는 알아서 바뀜
  • 2번(사용할 함수)만 바꾸면 된다!!

1. copy 만들기

→ 우리가 건들 글제목state와 글제목변경 state변경함수는 array를 가지고 있기 때문에

<button onClick={()=>{
        **let copy = [...글제목];**

      }}>글 발행</button>

2. array에 자료 추가하는 방법 : unshift()

→ 맨 처음에 유저가 입력한 글(입력값이라는 변수로 저장해둠) 추가

<button onClick={()=>{
        let copy = [...글제목];
        **copy.unshift(입력값);**
        
      }}>글 발행</button>

3. state 변경함수에 copy 넣기

<button onClick={()=>{
        let copy = [...글제목];
        copy.unshift(입력값);
        **글제목변경(copy);**
      }}>글 발행</button>

Q. 왜 새로고침하면 없어짐?

새로고침시 html js 파일 다시 읽어서 그럼

→ 이게 싫으면 서버나 DB 에 영구저장하면됨

0개의 댓글

관련 채용 정보