[본 캠프 20일차] React 입문 1주차 강의 마무리 + 2주차 강의

React 입문 1주차 강의

1-5 ~ 1-8

 

Template Literals 

문자열 입력 시 `` (빽틱)을 이용해서 문자열을 삽입하고 그 안에서 여러가지 동작을 하게 하는 것

`` 안에 변수를 사용할 땐 ${ }

상품 : ${item.name}

가격 : ${item.price}

안녕하세요. ${ item.name } 제품 가격은 ${ item.price } 원 입니다.

 

Destructuring

구조를 파괴하는 것(De + structuring)

const item = {

   name: "커피",

   price: 4000,

} 

const name = item.name;

const price = item.price;

 

const { name, price} = item;

 

function greet({ name, age}) {

    console.log(`안녕하세요. 제 이름은 ${name}입니다. 나이는 ${age}입니다.`); // 빽틱사용 시 ${}

// 객체를 구조 파괴할 때 순서는 상관없다

const person = {

    name: "르순이",

    age: 28,

};

greet(person);

 

배열 (순서대로) 

const color = ["red", "green", "blue"];

const [firstColor, secondColor] = colors; // red, green

const [, , thirdColor] = colors;  // blue

 

Spread Operators

배열이나 객체를 감싸고 있는 것을 없애버리고 요소를 꺼낸다.

배열이나 객체를 복사할 때 사용

 

const originalUser = {

    name: "르탄이",

    age: 28,

};

 

const updatedUser = originalUser;

updatedUser.name = "르순이";

 // 복사가 된게 아니다. 원본까지 르순이로 변경된다.

// 원본까지 다 복사되므로 ...(spread operators) 을 사용하여 안에 요소를 해체해준다.

const updatedUser = { ...originalUser };

updatedUser.name = "르순이"

                    =

const updatedUser = { name: "르탄이", age: 28 };

const updatedUser = { name: "르순이", age: 28 };

----------------

const first = [ 1, 2, 3 ];

const second = [ 4, 5, 6 ];

 

const combinedArray = [ ...first, ...second]; // [ 1, 2, 3, 4, 5, 6 ]

 

문제 2

const obj1 = { name: "르탄이", age: 25 };

const obj2 = { name: "르순이", email: " awgopin@sparta.com" }

// { name: "르순이", age: 25, email: 'awnbpw@sparta.com" }

// 키가 중복되어 합쳐진다면 뒤에 있는 객체가 앞에 있는 객체를 덮어씌운다.

 

mergedObject.name = "원장님";

// 이름을 바꿨지만 obj 1, 2 는 아무런 영향이 없다. 불변성이 잘 유지되어있다.

 

Rest operator

1. 함수의 매개변수 

2. 객체 분해 할당 시, 여러 값을 그룹핑

const person = {

   name: "John",

   age: 30,

   country: "USA",

   occupation: "Developer",

};

const { occupation, ...rest } = person;  // rest = { name: 'John', age: 30, country: "USA" }

---

React 입문 2주차 강의

React 란?

웹과 네이티브 ui를 위한 라이브러리다.

SPA 로 구성된 애플리케이션 ( Single Page Application )

UI 가 필요한 곳이면 어디든 사용가능 ( React Native 를 활용한 모바일 앱 개발, VR 개발 가능)

 

SPA

하나의 페이지로 이루어져 있는 애플리케이션

• React
• Vue
• Angular

MPA

SPA

MPA 는 서버에 요청을 하면 서버에서 새로운 html 페이지를 주는데, SPA는 서버에 요청 시 새로운 html 페이지를 주는게 아니라 api만 요청하는거라 이미 다운로드 받아놨던 html에 해당 부분만 json 형태로 바꿔준다.

 

Routing

해시 값을 기준으로 페이지를 이동하는 기술

hash 값을 기준(=hashed)으로 페이지를 이동한다(=routing)

 

 

프로젝트 생성 1

 

CRA(Create React App)

한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법

 

윈도우는 git bash 또는 power shell에서 mac os는 터미널(zsh)에서 아래 코드를 입력

yarn create react-app [원하는 프로젝트 이름]

 

성공 메시지를 확인하신 후, 하단에 있는 두 명령어를 통해 react 프로젝트를 실행

cd react-cra-app
yarn start

 

 

Vite

Vite 역시, CRA와 같이 리액트 프로젝트를 풀 세팅해주는 빌드 도구

CRA 는 WebPack 을 사용하고, Vite 는 Esbuild를 사용. 엄청나게 빠른 속도

 

power shell 

yarn create vite my-react-app --template react

 

프로젝트가 생성되면 다음 명령어를 통해 프로젝트에 접근 및 실행

cd my-react-app   //power shell
yarn    //power shell
yarn dev    //vs code

 

컴포넌트와 JSX

폴더를 만들 때는 소문자로 시작하는 카멜케이스, 파일을 만들때는 대문자로 시작하는 카멜케이스  

 

Props

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터. 컴포넌트 간의 정보 교류 방법 이다.

1. props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향).
2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.