22.10.5

커피 내리는 그냥 사람·2022년 10월 5일

TIL

항해99

목록 보기

27/108

오늘 공부한 것 + 멘토링

1. 리액트에서 불변성을 지켜야 하는 이유

불변성 : 새로운 메모리에 할당된다. 메모리 영역에서 값을 변경할 수 없다.

참고 블로그
1. 효율적인 상태업데이트 (얕은 비교 수행)

얕은 비교란 객체의 프로퍼티를 하나하나 다 비교하지 않고, 객체의 참조 주소값만 변경되었는지 확인합니다. 얕은 비교는 계산 리소스를 줄여주기 때문에 리액트는 효율적으로 상태를 업데이트 할 수 있습니다.

사이드 이펙트 방지 및 프로그래밍 구조의 단순성.

원시타입은 애시당초 불변성 특징을 가지고 있지만 참조타입인 객체나 배열의 경우 새로운 값을 변경할 때 원본 데이터가 변경이 됩니다(불변성이 지켜지지 않습니다). 이렇게 원본 데이터가 변경될 경우, 이 원본데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있습니다. 프로그래밍의 복잡도도 올라갑니다.

불변성을 가진 원시타입과 달리 참조타입의 경우에는 의도적으로 불변성을 지켜주어야한다. 이 때 새로운 주소 값을 가진 객체를 생성하여 상태를 업데이트 해준다. spread operator, map, filter, slice, reduce 메소드들을 활용한다.

<이해과정>

객체 useState 선언 => 메모리에 할당 => 주소값이 찍힌다.
리액트는 메모리 주소를 비교한다.
다르면 리렌더링이 된다.
값을 바꾸면 => 주소값은 안 변하는데 데이터만 바뀐다. => 그럼 리렌더링이 안 된다.
그래서 set~ 을 이용하면 재선언해서 메모리 주소가 다른 또 다른 값이 생긴다

그럼 리액트가 알아먹고 리렌더링을 한다.
전 종이에서 1,2,3,... => 새 종이에 1,2,3 + a를 한다.

그러면 메모리에 값도 변경 안되고 새롭게 변경된 값에 대한 리렌더링도 된다.

<멘토님 첨언>

불변성 유지?

리엑트가 동작하는 원리는 가상 돔 : 데이터 형태를 만든 뒤 스테이트 값이 변경 될 때 변화부분만 실제 돔으로 연결
원시값과 참조 객체가 다르다 : 원래 객체에 값을 갈아 끼우는게 아니라 새롭게 만든 데이터를 할당(setTodo 등) => 이를 리액트가 인지
인덱스처럼 직접 데이터를 바꾸는 것은 허용되지 않음
불변성 유지한다 : 원래 값은 안 바꾸고 새로운 값을 할당하겠다! (임의로 막 바꾸는게 아니다, 형식을 갖춰서 바꿔야 한다.)

2. (리)렌더링이 되는 조건

참고 블로그

1. state 변경이 있을 때 : setState()메서드 이용해서 바꿔준다.

state의 변경이 감지될 떄 직접 바꿔주면 state의 변화를 감지하지 못하기 때문.

2. 새로운 props가 들어올 때

전달받은 props 값이 업데이트 되면...

3. 부모 컴포넌트가 렌더링 될 떄

부모가 업데이트 되면 자식도...

4. shouldComponentUpdate에서 true가 반환될 때

shouldComponentUpdate 메서드가 state변경이나 새로운 props 전달받을 때 실행
return => true가 되어 렌더링이 시작되지만 렌더링이 필요하지 않는다면 개발자가 false로지정해줘서 막을 수 있다고 한다.

5. forceUpdate가 실행될 떄

props나 state가 아닌 다른 값이 변경되었을 때 리렌더링을 하고 싶다면 사용하는 것.

<예시코드>

import React from 'react';
  
class App extends React.Component {
  reRender = () => {
    // calling the forceUpdate() method
    this.forceUpdate();
  };
  render() {
  
    console.log('Component is re-rendered');
    return (
      <div>
        <h2>GeeksForGeeks</h2>
        <button onClick={this.reRender}>Click To Re-Render</button>
      </div>
    );
  }
}
export default App;

3. Computed Property in JS&React

const handleChangeInput = (event) =>{
  setTodo( {
    ...todo,
    // 원래 있던 값 전개
   [event.target.name] : event.target.value,
   // 리스트로 들어오는 값 computed property로 값 매칭해주기
   // setTodo(...~, todo)와 비슷한데 두 개를 한 번에 넣어준다. => 객체로 맞춰서
  })
}