[TIL]2022.10.03

오늘 한 일

입문주차 개인 과제 완료 --- 손코딩 반복
딥러닝 끝
JS스터디

오늘 느낀 것
불변성 이해-------

왜 리액트에서 불변성을 지켜야하나?
리액트에서 불변성을 지켜주는 이유는 리액트가 상태 업데이트를 하는 원리 때문입니다. 리액트는 상태값을 업데이트 할 때 얕은 비교를 수행합니다. 즉 객체의 속성 하나하나를 비교하는게 아니라 참조값만 비교하여 상태 변화를 감지합니다. 이런 이유로 배열이나 객체를 업데이트 할때 setState([...state, newState]), setState({...state, [key]: value}) 이런식으로 배열이나 객체를 새로 생성해서 새로운 참조값을 만들어서 상태를 업데이트 합니다. 이런 행위가 불변성을 지켜주는 것입니다. 불변성을 지켜줌으로써 얻게 되는 또 다른 이점은 바로 사이드 이펙트를 방지하는 것입니다. 즉 외부에 존재하는 원본데이터를 직접 수정하지 않고, 원본데이터의 복사본을 만들어서 값을 사용하기에 예상치 못한 오류를 사전에 방지할 수 있습니다. 다시 반대로 생각해보면 외부의 값을 함부로 변경할 수 있는 것은 위험한 일입니다. 만약 다른 어떤 곳에서 원본데이터를 사용하고 있다고 하면 어플리케이션 어딘가에서 사이드 이펙트가 일어날 가능성이 있기 때문입니다. 결국 리액트는 불변성을 지킴으로 인해 효과적인 상태 업데이트와 사이드 이펙트를 방지하는 이점들을 얻고 있습니다.

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

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

 

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

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

 


어떻게 불변성을 지키는가?
spread operator, map, filter, slice, reduce 등등 새로운 배열을 반환하는 메소드들을 활용하면 됩니다.

* splice는 원본데이터를 변경함

 
setState를 이용할 때 원시타입 경우에는 값을 바로 넣어주어도 되지만

참조타입인 경우에는 새로운 객체나 배열을 생성한 후 값을 넣어주어야 합니다. 

// 원시타입
const [number, setNumber] = useState(0)
setState(3)

// 참조타입
const [person, setPerson] = useState({ name: '', age: 30 })
setState({...person, name: 'pyo'})
 

정리

- 불변성이란 메모리 영역의 값을 변경할 수 없는 것이다.

- 리액트는 불변성을 지켜줌으로써 효율적인 상태업데이트를 한다.

- 리액트는 불변성을 지켜줌으로써 사이드 이펙트를 사전 방지하고 프로그래밍의 구조를 단순하게 유지한다.

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

"불변성의 진짜 의미는 메모리 영역에서 값을 변경할 수 없다는 의미입니다."

setState를 통해 바꿔줘야함
-----------------------
질문하는 방법
1. 어떤 행동(동작)을 하다가 에러가 났는지 에러 코드+스샷
2.  에러해결을 위해 어떤 노력을 해봤는지 구글링 등등

--------------------
map쓸 때 리턴 주기

명확하고 구체적으로 

내가 원하는게 뭘까?
내가 이루고 싶은게 뭘까?
지금 이 상황에서 나는 무엇을 원하는가?
내가 무엇을 할 수 있는가?

원하는 것을 이루기 위해 어떻게 할 것 인지? 

문제를 해결하기 위해 틀에박힌 프레임에서 벗어나 최고의 리소스를 찾기
효율적으로 && 능동적으로 누군가의 도움이나 의지 말고 나 스스로 

나에게는 모든 문제를 해결할 힘이 있다
이 세상에는 내게 필요한 모든 리소스가 존재한다
해결 불가능한 문제는 이 세상에 없다

내일 할 일

JS스터디 ★
리액트 기초강의 인프런에서 듣기 ★★★
벨로퍼트 문서 보기 ★★
코딩애플 + 노마드 리액트 결제 --- 위에 두개 끝내고 여유되면
패캠 환불하기 // 안 되면 추후에 듣기 ★
입문주차 개인 과제 완료코드 이해하기 // 손코딩 반복 ★★★


---수요일----
인공지능,컴c,파이썬 쉅 끝까지