array형 state 변경시 원본 보존에 대한 질문입니다.

[박성화]

안녕하세요 선생님! 강의 늘 잘 듣고 있습니다.

다름이 아니라 state 변경에 대한 질문인데요,

강의에서 array 자료형의 데이터 저장 방식과 state 변경 함수의 작동 방식(먼저 기존과 변경 state가 다른지 비교 후 작동)의 특성상 

let [original, originalChange] = useState([a, b, c])

onClick={() => {
let copy = [...original];
originalChange(copy.sort());
}}

이런 식으로 변경한다고 말씀하셨습니다.

state 변경함수를 이용하기 위해 원본과 다른 딥 카피본을 만들어서 state를 변경한다는 것은 이해하였습니다만,

state의 특성상 이벤트 핸들러(이 경우는 onClick) 작동 후에 original이라는 변수에는 copy.sort()가 저장되어 원본이 보존이 안되지 않습니까?
onClick={() => {
let copy = [...original];
originalChange(copy.sort());

console.log(original);

}}
를 확인해보아도 첫 클릭시에만 원본이 나오고 다음부터는 copy.sort()값으로 변경된 original이 출력됩니다.

그래서 가나다 정렬 후 원래 상태로 복귀하기 위해서
let 원본보존 = original; 
이라는 코드를 입력하였지만 애당초 이벤트 후 original 자체가 변화하였기에 원본보존 변수에 들어가는 값도 함께 변하였습니다.
let 원본보존 = [...original];
이 경우에도 마찬가지였습니다.

그래서 부득이하게 원본의 보존을 위해
let 원본보존 = [a, b, c];
이렇게 하드코딩을 할 수 밖에 없었는데, 혹시 더 나은 방법이 있을까요? 아니면 제가 무언가 놓치는게 있는걸까요?

감사합니다.

[박성화]

function App() {

  let post = '블로그 제목 예시';
  let [title, titleChange] = useState(['남자 코트 추천', '강남 우동 맛집', '자바스크립트 독학']);
  let originalTitle = ['남자 코트 추천', '강남 우동 맛집', '자바스크립트 독학'];
  let [likeCount, likeCountChange] = useState(0);
  function likeCountUp(){
    likeCountChange(likeCount + 1);
  }
  function sortABC(){
    let copy = [...title].sort();
    titleChange(copy);
  }
  function returnOriginal(){
    titleChange(originalTitle);
  }
  return (
    <div className="App">
      {/* 상단메뉴 만들어보기 */}
      <div className="black-nav">
        <h4 style={{color:'white', fontSize : '16px'}}>ReactBlog</h4>
      </div>
      <button onClick={sortABC}>가나다순 정렬</button>
      <button onClick={returnOriginal}>되돌리기</button>
      <div className="list">
        <h4>{title[0]} <span onClick={likeCountUp}>👍</span> {likeCount} </h4>
        <p>2월 17일 발행</p>
        <button onClick={()=>{
          let copy = [...title];
          copy[0] = '여자 코트 추천'
          titleChange(copy);}}>수정하기</button>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

혹시나 해서 function App(){} 내부 모든 코드를 첨부합니다!

[codingapple]

sort쓰면 원본변경됩니다 
다른변수 만들어서 원본 저장해놓는 방법밖에 없습니다

[박성화]

넵 답변 감사합니다 :)
몇 가지 더 보충 질문이 있는데요,

1. sort()가 아닌 다른 방법으로 변경해도, 그러니까 예를 들어 강의에서 하셨던 
          let [title, titleChange] = useState(['남자 코트 추천', '강남 우동 맛집', '자바스크립트 독학']);
          let copy = [...title];
          copy[0] = '여자 코트 추천';
          titleChange(copy);
같은 단순 변경을 하고 state 변경 함수를 이용하여 변경하여도 원본이 변경되는 것이죠?(제 생각에는 변경될 것 같습니다.)

2. 다른 변수 만들어서 원본을 저장한다는 말씀이 제가 언급했던 하드코딩을 통한 원본 저장을 말씀하시는건가요?

감사합니다.

[codingapple]

둘다맞습니다

[글쓴이]

글