코딩애플_블로그 글 수정버튼 만들기

버튼 클릭시 글 수정하기

변경 code

import React, {useState} from 'react';
import './App.css';

function App() {
  
  let [title, titleFunction] = useState(['React','HTML','CSS']);
  let [count, countFuction] = useState(0);

  function titleChangeFunction(){
    let changedtitle = title.slice();   //[...title] 도 가능, deep copy 가 된다.
    changedtitle[0] = 'React - 1';
    titleFunction(changedtitle);
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 블로그</div>
      </div>

      <div className='list'>글제목
        <h3>{title[0]}  <span onClick = {()=>{countFuction(count+1)}}> 😁 </span> {count} </h3>
        <button onClick={titleChangeFunction}>Title Change</button>
        <p>2월 17일 발행</p>
        <hr/>       
      </div>

      <div className='list'>글제목
        <h3>{title[1]}</h3>
        <p>2월 17일 발행</p>
        <hr/>      
      </div> 

      <div className='list'>글제목
        <h3>{title[2]}</h3>
        <p>2월 17일 발행</p>
        <hr/>      
      </div>

    </div>
  );
}

export default App;
export default App;

풀이

<button onClick={titleChangeFunction}>Title Change</button>

• 버튼을 만들고 클릭 실행시 함수(titleChangeFunction)를 적어준다.

function App() {
  
  let [title, titleFunction] = useState(['React','HTML','CSS']);
  let [count, countFuction] = useState(0);

  function titleChangeFunction(){
    let changedtitle = title.slice();   //[...title] 도 가능, deep copy 가 된다.
    changedtitle[0] = 'React - 1';
    titleFunction(changedtitle);
  }

  return (

• 클릭 실행시 함수를 정의 해 준다.

• states 문법에서는 원본은 immutable 하는 게 관습,관례

• 따라서 복사배열을 만든다.(deep copy)

• 바꾸고자 하는 데이터(ex)'React - 1') 을 할당한다.

• states 함수(titleFunction) 와 적용할 데이터(복사배열)를 titleFunction(changedtitle); 써준다.