[WIL] #4

🗓 기간: 23/6/15 ~ 23/6/22

👉🏼 이번주 목표

1. 리액트 재진입을 위한 입문 공부

👉🏼 공부한 내용 요약

• 리액트에서 자주 쓰이는 자바스크립트 문법 요약(ES6)
• 컴포넌트, props, state 등 간단한 개념 공부
  

👉🏼 어려운 내용

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

원시데이터: 숫자, 문자, 불리언 등

let num1 = 1
let num2 = 1

같은 메모리를 바라보고 있기에 num1 === num2는 true가 나온다.

원시데이터는 각자 다른 메모리 공간을 참고하고 있기 때문에 num2의 값을 2로 변경하게 되면 메모리 주소 자체가 변경된다.

저장된 값 자체를 바꿀 수는 없다. 메모리에 저장된 값 자체를 바꾸는게 아니라 새로운 메모리 저장공간을 만드는 것이다. 1을 바꾸는게 아니라 2라는 공간을 만들고 그것을 다시 바라보게 한다.
이를, 불변성이 있다라고 표현한다.

원시데이터가 아닌 것: 배열, 객체, 함수 등

let obj1 = {
	name: "Lee Min Ho",
}
let obj2 = {
	name: "Lee Min Ho",
}

값이 완전히 같아도 다른 공간에 저장되어 있기에 obj1 === obj2는 faluse가 나온다.
원시데이터가 아닌 것(객체, 배열, 함수 등)은 기존의 저장되어 있던 공간(name 공간) 자체를 바꿔버리는 것이다. (Lee Min ho -> Kim Min ho)
이를, 불변성이 없다라고 표현한다.

• 리액트에서 화면을 렌더링 할지는 State의 변화에 따라 결정된다.
• 리액트에서 State를 사용하는 목적은 UI를 바꾸기 위해서 이고, 렌더링을 다시 하기 위해서 이다.

하지만 불변성이 없는 건 주소가 바뀌지 않았으니 리액트에서는 변한게 없다고 생각한다. 그렇게 되면 렌더링이 되지 않는다.

👉🏼 정리한 내용

• SPA의 장단점
• [React] 상대경로 import → 절대경로 지정하기

🐸  느낀 점

지난주까지 자바스크립트 개념들과 알고리즘을 열심히 뽀갰고, 드디어 리액트를 공부하기 위한 준비가 끝났다(?)!
이번주에 입문 공부를 하면서 기존에 알던 개념들을 다시 복습하는 느낌이었는데, 봐도 봐도 개념이 쉽지는 않다.. 그래도 포기하지 않고, 다음주엔 조금 더 디테일한 내용들을 공부하며 정리해봐야겠다.
이번주엔 TIL과 개념 정리를 많이 하지 못했다. 어려운 개념들이겠지만 차근차근 정리하다보면 다음주에 WIL엔 쓸 말이 많지 않을까!?
화이링 🙋🏼‍♀️