[TIL 2023.06.13] React 불변성/Rendering/counter 프로그램 만들어 보기

💻오늘 배운 내용

불변성

불변성이란 메모리에 있는 값을 변경할 수 없는 것

숫자, 문자열 등 원시 데이터 = 불변성이 있다

객체, 배열, 함수 = 불변성 없다

 

그 이유는

원시데이터: 수정을 했을 때 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장

원시데이터가 아닌 데이터: 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꿔버린다.

 

리액트에서 데이터의 불변성을 지켜주는 것이 중요한 이유

리액트에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인한다.

state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 메모리 주소를 비교

 

따라서,

setState 할 때 불변성을 지켜주기 위해,

직접 수정을 가하지 않고 전개 연산자(spread operator(...))를 사용해서 기존의 값을 복사하고,

그 이후에 값을 수정하는 식으로 구현

 

Rendering

리액트에서 렌더링이란,

컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미

 

렌더링 트리거

• 첫 리액트 앱을 실행했을 때
• 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때.
  • 컴포넌트 내부 state가 변경되었을 때
  • 컴포넌트에 새로운 props가 들어올 때,
  • 상위 부모 컴포넌트에서 위에 두 이유로 렌더링이 발생했을 때

리액트 앱이 실행되고 첫 렌더링이 일어나면 컴포넌트의 루트에서 시작하여

아래쪽으로 쭉 훑으며 컴포넌트가 반환하는 JSX 결과물을 DOM 요소에 반영한다.

 

❓발생한 이슈/고민

obj1={name:”kim”}, obj2={name:”kim”} 일 때,

왜 두 데이터 값에 할당된 주소는 다르고, obj1===obj2=false일까?

---

function App() {
  let [count, setCount] = useState(0);

App 함수 내에서 위와 같이 useState를 설정했을 때,

<button
  onClick={() => {
    count++;
    setCount(count);
  }}
>

이렇게 작성하는 것과

<button
  onClick={() => {
    setCount(count++);
  }}
>

이렇게 작성하는 것의 결과가 차이가 나는 이유는 무엇일까?

첫번째의 경우 버튼을 클릭하는 즉시 화면의 카운트가 바로 바뀌는 반면,

두번째의 경우 두번 클릭해야 카운트가 리렌더링 된다.

 

💡해결과정

number = 1 이라고 선언을 하면

메모리에는 1 이라는 값이 저장, number 라는 변수는 메모리에 있는 1을 참조한다.

여기서 let secondNumber =1 이라고 다른 변수를 선언을 했다고 가정 했을 때

마찬가지로 이미 메모리에 생성되어 있는 1이라는 값을 참조한다.

즉, number와 secondNumber는 변수의 이름은 다르지만, 같은 메모리의 값을 바라보고 있는 것

number  === secondNumber는 true

 

하지만

let obj_1 = {name: ‘kim’} 이라는 값을 선언하면 메모리에 obj_1이 저장

let obj_2 = {name: ‘kim’} 이라고 같은 값을 선언하면 obj_2라는 메모리 공간에 새롭게 저장

obj_1 === obj2 는 false

 

내가 지금 헷갈리고 있는 부분은 얕은 복사부분을 배우면서 객체의 주소값을 복사 해왔었던 사례와 헷갈린 것 같다.

여기서 obj1과 obj2는 복사 형태가 아니라 새롭게 생성된 별도의 객체라 저장된 메모리의 주소값이 다른듯~

---

<button
  onClick={() => {
    setCount(count++);
  }}
>

이 부분을 개발자 도구로 확인해보면 다음과 같다.

두 번을 클릭해야 카운트가 올라가는데 그 이유는 

증감연산자의 문제. 연산자를 앞에 두면 제대로 적용된다.

<button
  onClick={() => {
    console.log(count);aa
    setCount(++count);
  }}
>

 여기서 다시 한번 상기해보는 증감 연산자 전위, 후위의 차이점

 

전위 (++n)

연산자 ++가 피연산자 n보다 앞에 위치할 때를 전위라 하고 1증가된 값이 연산결과값이다.

 

후위 (n++)

반대로 연산자 ++가 피연산자 n보다 뒤에 위치할 때를 후위라 하고 1증가하기 전 값이 연산결과값이다.

항상 기본을 잊지말자..

 

🧐궁금점과 부족한 내용

현직 개발자분의 특강을 들었는데 인상깊은 키워드가 있어서 몇개 메모 했다.

 

-메타인지

'자기 자신이 인지하고 있음을 인지하는 것', 즉 '자신이 알고 있는지 모르고 있는지를 안다'는 의미

 

-문제를 진정으로 해결해본 사람은

어떤문제였는지 어떻게 해결했는지 정확하게 세부사항까지 설명할 수 있다.

 

-래퍼클래스?

기본 자료타입(primitive type)을 객체로 다루기 위해서 사용하는 클래스들을 래퍼 클래스(wrapper class)

기본타입(primitive type)	래퍼클래스(wrapper class)
byte	Byte
char	Character
int	Integer
float	Float
double	Double
boolean	Boolean
long	Long
short	Short

 

-나의 무기가 무엇인지 인지하고 다듬자 > 추천하는 책 "타이탄의 도구"

 

📋레퍼런스

https://codingadinga.tistory.com/11

https://coding-factory.tistory.com/547