[React] 블로그 제작(3): 글 제목 추가하기

제작한 블로그 하단에 있는 박스에 원하는 제목을 입력하면 새로운 목록으로 추가해주는 함수를 복습해보려고 한다. 혼자 생각할 땐 너무 어려웠는데 막상 찾아보고 해보니.. 어이없게도 순식간에 해결되버린 것.. 😂

🖥 최종 출력 화면:

📝 체크리스트

• unshift()
• spread

📍unshift() 사용하기

array state에 새로운 값을 추가해주는 첫번째 함수로는 unshift()가 있다.
함수 사용 방법은 우리가 array state 값을 변경하는 방식과 거의 같다.

1. let 복사본이름 = [...복사할 변수명];
2. 복사본이름.unshift(유저가 입력할 글 또는 state명);
   여기서 유저가 입력할 글은 를 통해 받아오기 때문에 받아온 글을 저장해주는 state명을 넣어주면 된다!
3. 기존 state 변경함수(복사본이름);
4. <button onClick = {() => {.. 이 부분에 넣어주기 .. }}>

⌨️ 실제 코드

<button onClick = {() => {
  let newTitle = [...title];
  newTitle.unshift(input); //여기서 input은 e.target.value을 저장한 state 변수명
  setTitle(newTitle);
}}> 발행하기 </button>

📍spread 사용하기

array state에 새로운 값을 추가해주는 두번째 연산자로는 spread가 있다.
사용 방법은 unshift()보다 더 간결하다.

1. let 복사본이름 = [유저가 입력할 글 또는 state명, ...복사할 변수명];
   유저로부터 입력받은 글을 기존 state를 복사하는 순간에 맨 앞에 추가하여 배열을 새롭게 생성한다.
2. 기존 state 변경함수(복사본이름);
3. <button onClick = {() => {.. 이 부분에 넣어주기 .. }}>

⌨️ 실제 코드

<button onClick = {() => {
  let newTitle = [input, ...title];
  setTitle(newTitle);
}}> 발행하기 </button>

막상 작성해보니 별 거 아니었던 부분.. 값을 변경하려고 했을 때 막연히 새로운 함수를 생성해서 그 함수를 onClick()함수 속에 넣어주려고 복잡하게 생각했었는데, array state를 변경할 땐 state 변경함수를 통해 어떻게~ 변경할 것인지 간단하게 생각해볼 수 있구나를 또 다시 느꼈다👣