[TIL] 23/10/31 React 입문 : React와 컴포넌트, javascript 깊은복사

🙄 한일 / TIL 😣

[React 입문 강의 듣는 중]

1) React에서 많이 쓰일 javascript 내용 짚고넘어가기

1-1) javascript 깊은 복사 방법

const obj1 = {
	value1 : 10;
};

// 얕은 복사 (obj1의 주소값을 복사)
const obj2 = obj1;

// 새로운 obj3 생성 : obj1을 문자열로 풀어서 다시 JSON 형식으로 파싱해서 저장
const obj3 = JSON.parse(JSON.stringify(obj1));

//obj2의 value1값을 변경
obj2.value1 = 11;

console.log("obj1", obj1); // 11 (obj1도 값이 변경됨)
console.log("obj1", obj1); // 11
console.log("obj1", obj1); // 10 (변하지 않음)

 

2) React

React란 ?
A JavaScript library for building user interfaces

- SPA(single page application) 기반

- 컴포넌트 단위의 독립적인 블록을 이용한 개발

 

SPA 장점 : 페이지 갱신 없이 좋아요 버튼 하나만 업데이트 가능
SPA 단점 : 구글 SEO (Search Engine Organization) 에 약하다.
html 파일 내용물을 js 로 생성해서 쓰기 때문.

검색 로봇이 찾기 어렵다~

 

2-1) 리액트를 쓰는 이유

시장점유율 : React > vue.js > angular 

reactJS 는 선발주자로 막강한 커뮤니티와 자료 보유. RN(Reacti Native) 와의 상생. VR에서도 활용.

vueJS 는 후발주자이지만 배우기 쉽고 간단하여 꾸준히 성장 중..

angularJS는 안정적인 프레임워크지만 배우기 힘들고 무거움, 결국 공식 지원도 종료함. (21.12.31)

리액트를 해야한다!

3) React Component

컴포넌트는 재사용이 가능한 개별적인 UI 조각
"props" 를 입력받고 화면에 표시 되는 방법을 기술한 react 엘리먼트를 반환 (JSX형식 = Javascript+XML)
함수형 컴포넌트를 사용 (클래스형 컴포넌트가 있었지만 이제 잘 안씀)

import React from "react"; // 컴포넌트 밖에서 내가 필요한 파일을 가져오기

const App() => {
// 자바스크립트 코드

return { 
// JSX 영역
};
};

export default App; // 내 컴포넌트를 밖으로 내보내기

주의사항
컴포넌트 명은 대문자로 시작 App()
폴더명은 소문자로 시작하는 카멜케이스
컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스

 

부족한 점

진도가 안나가... 후...