[WIL] 스파르타 코딩 리액트 입문

ohoho·2023년 6월 16일

WIL

슬기로운스터디

목록 보기

10/54

SPA(Single Page Application)

단하나의 index.js만 가지고 있다.
서버로부터 단 한개의 파일만 받고 동적으로 불러오기 때문에 SEO에 약하다.
깜빡임이 없기에 자연스러운 UX구현가능(컴포넌트 단위로 변경사항을 반영하기에 깜빡임이 없다.)

NPM

node.js를 설치할때 자동으로 생성된다.
Node Package Manager의 약자이다.
NPM platform 그 자체이다.

YARN

페이스북에서 개발한 패키지 관리자이다.
NPM과의 호환성이 좋고, 속도나 안정성 측면에서 npm 보다 월등히 좋다.

📌 둘다 Javascript 런타임 환경인 노드의 패키지 관리자이다.

런타임이란?

프로그래밍 언어가 구동되는 환경을 말한다.(브라우저, node환경)

컴포넌트

컴포넌트 이름은 대문자로 시작해야한다.
폴더는 소문자로 시작하는 카멜케이스로 작성하고, 파일명은 대문자로 시작하는 카멜케이스로 만든다.

Props

부모컴포넌트가 자식컴포넌트로 값을 내려준다.(위에서 아래로 단방향만 가능하다.)

Prop Drilling : 부모컴포넌트에서 최하위 자식컴포넌트한테 props를 주기위해 중간 위치 자식컴포넌트들까지 props를 내려주는것(중간다리역할 컴포넌트들 생성)
📌 이를 대응하기 위해 Redux등 상태관리 툴 사용

구조분해할당

이미 완성형인 코드를 분해해서 다시 할당한다.

const testObj = {
	name : 'kim',
  	age : 20,
  	company : 'sparta'
}

const {name , age , company} = testObj;

console.log('name',name)
//name kim
console.log('age',age)
//age 20

State

UI를 바꾸기 위해 사용한다.(변경되어야 하는값)

생명주기

불변성

메모리에 있는 값을 변경할 수 없는것

1. 원시데이터(숫자, 문자, 불리언)
//재할당 하면서 값이 변하기에 불변성이 있다(값이변하며 주소도 변한다)

let number = 1;
let secondNumber = 1

console.log(number === secondNumber)
// true


2.원시데이터가 아닌것들(객체, 배열, 함수)
//재할당해도 주소가 동일하기에 불변성이 없다(값이 변경하는게 아니라 메모리의 새로운 공간을 만들기에 불변성이 없다.)

let obj1 = {
	name : 'kim'
}
let obj2 = {
	name : 'kim'
}

console.log(obj1 === obj2)
// false
/*
** 메모리에서 객체(배열, 함수 등) 데이터 할당시에는 변수가 값을 바라보고 있는게 아니라
** 메모리와 값 사이의 주소를 바라보고 있기에 값이 같아도 false가 나온다.
*/