[React] 3. 글 제목 수정하기

[수정 버튼 클릭하면 글 제목 '남자 코트 추천' -> '여자 코트 추천'으로 바꾸기]

 

1. 덮어 씌우기

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬독학']);

  return (
    <div className="App">

      <button onClick={()=>{
      글제목변경(['여자 코트 추천', '강남 우동맛집', '파이썬독학'])
    }}>수정버튼</button>

 

2. 원하는 요소만 바꾸기

데이터가 많을 때는 원하는 요소만 변경하는 것이 코드가 깔끔함.

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬독학']);

  return (
    <div className="App">

      <button onClick={()=>{
      글제목[0] = '여자코트 추천';  
      <!--글제목이라는 array에서 0번째 요소(남자 코트 추천) 찾아 변경-->
      글제목변경(글제목) 
      <!--state변경함수인 글제목변경에 글제목이라는 요소를 집어 넣음.-->
    }}>수정버튼</button>

 

3. 복사본 만들어서 변경

원본 데이터가 손상되면 다시 원본 데이터가 필요할 때 사용할 수 없으므로 복사해서 변경하는 것이 좋음

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬독학']);

  return (
    <div className="App">

      <button onClick={()=>{
      let copy = [...글제목]; 
      <!-- 글제목을 복사하되 원본과 다르다는 것을 나타내기 위해 ...사용-->
      글제목[0] = '여자코트 추천';  
      <!--글제목이라는 array에서 0번째 요소(남자 코트 추천) 찾아 변경-->
      글제목변경(copy) 
      <!--state변경함수인 글제목변경에 copy라는 요소를 집어 넣음.-->
    }}>수정버튼</button>

state변경 함수는 기존 state와 신규 state가 같은지 비교 후에 변경.

array 변수를 복사하게 되면 그 값을 복사하는 것이 아니라 그 값을 저장한 위치를 변경한 것임.

그래서 '남자 코트 추천'을 '여자 코트 추천'이라고 바꿔도 같은 값으로 인식함.

복사본을 독립적인 state로 인식하기 위해... 을 사용함.

 

 

[정렬 버튼 누르면 가나다 순으로 정렬]

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬독학']);

  return (
    <div className="App">

      <button onClick={()=>{
      let copy = [...글제목]; 
      <!-- 글제목을 복사하되 원본과 다르다는 것을 나타내기 위해 ...사용-->
      copy.sort();  
      <!-- sort()는 정렬함수 -->
      글제목변경(copy)       
      <!--state변경함수인 글제목변경에 copy라는 요소를 집어 넣음.-->
    }}>수정버튼</button>