6일차

그루트·2021년 9월 21일

항해 TIL (Today I learned)

목록 보기

5/85

react 하기 전 javascript

스코프(Scope)가 뭘까?

우리가 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위를 스코프라고 불러요.
변수에 접근할 수 있는 범위죠!

Class

객체 지향 프로그래밍에서 클래스는 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀을 말해요. 객체를 정의하기 위한 상태와 함수로 구성되어 있죠!
객체 단위로 코드를 그룹화하고 쉽게 재사용하려고 사용합니다.

class Cat {
// 생성자 함수
constructor(name) {
// 여기서 this는 이 클래스입니다.
this.name = name;
}

// 함수
showName(){
	console.log(this.name);
}

}

// 여기서 new는 키워드예요. 새로운 무언가를 만들기 위해서 생성자 함수와 함께 씁니다.
// 네, new와 생성자 함수는 세트예요 :) (소근
let cat = new Cat('perl');
cat.showName();
console.log(cat);

spread

어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내주는 친구입니다.

let array = [1,2,3,4,5];
// ... <- 이 점 3개를 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array]은 array에 있는 항목을 전부 꺼내 
// 새로운 배열([] => 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
let new_array = [...array];

console.log(new_array);

map

map은 배열에 속한 항목을 변환할 때 많이 사용합니다.
어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만들어줍니다.
즉, 원본 배열은 값이 변하지 않아요!

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.map((array_item) =>{
return array_item + 1;
});
// 새 배열의 값은 원본 배열 원소에 +1 한 값입니다.
console.log(new_array);
// 원본 배열은 그대로 있죠!
console.log(array_num);

filter

filter는 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어주는 함수입니다.
원본 배열은 변하지 않고, 원하는 배열을 하나 더 만들 수 있다니 (최고)죠!

const array_num = [0, 1, 2, 3, 4, 5];

// forEach(콜백함수)
const new_array = array_num.filter((array_item) => {
// 특정 조건을 만족할 때만 return 하면 됩니다!
// return에는 true 혹은 false가 들어가야 해요.
return array_item > 3;
});

console.log(new_array);

concat

concat은 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수입니다!
원본 배열은 변하지 않아요!

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = array_num01.concat(array_num02);

// 중복 항목(숫자 3)이 제거되지 않는다:)
console.log(merge);

set

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
// Set은 자바스크립트의 자료형 중 하나로,
// 중복되지 않는 값을 가지는 리스트입니다. :)!
// ... <- 이 점 3개는 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내
// 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
const merge = [...new Set([...array_num01, ...array_num02])];

console.log(merge);

from

const my-name = "minguk";

const my_name_array = Array.from(my_name)

['m','i','n','g','u','k']

REACT 시작전 설치

NVM(Node Version Manager)을 왜 써야할까?

nvm은 Node.js의 버전 관리자입니다.
우리 컴퓨터에 node를 설치하는 툴인데 수많은 버전을 마음대로 골라 설치할 수 있게 해주는 멋진 친구입니다. 🙂

시스템(우리 컴퓨터)에 Node.js를 직접 설치하다보면 다른 버전을 설치하게 되는 경우가 많은데, 여러 버전의 Node.js를 관리하는 건 굉장히 귀찮은 일이죠. 😖

nvm을 설치하고 설치한 nvm을 통해 node를 설치하면 나중에 생길 귀찮음을 방지할 수 있습니다!

NPM(Node Package Manager)

은 무수히 많은 third-party 패키지를 활용할 수 있게 해줍니다!

CRA가 뭘까?

React는 레고같은 친구입니다. 어린이들이 레고로 성을 만드는 것처럼 우리는 React로 웹사이트를 만들 거예요.

마트에서 레고를 보신 분들은 아시겠지만, 레고는 네모 블럭, 긴 블럭, 혹은 귀여운 캐릭터만 따로 구매할 수 있죠? 만들고 싶은 성 모양에 맞춰 누구는 네모 블럭만 잔뜩 살 것이고 누구는 성문과 대포까지 살 겁니다.

하나씩 구매하기 번거롭다면요? [해리x터 성만들기]같은 패키지를 사겠죠!

React도 마찬가지입니다! 우리가 웹사이트에 만들기 위해 필요한 것들을 하나씩 설치할 수 있습니다. (webpack, babel 같은 녀석들을 배워야 하지만요.)

CRA(Create React App)는 웹사이트를 만들 때 필요한 것을 몽땅 때려넣어 만든 패키지입니다. 레고의 해리x터 성만들기 같은 거라고 생각하시면 좋아요.

우리의 첫 리액트 프로젝트를 만들어 봅시다!

yarn create react-app [우리의 첫 리액트 프로젝트 이름]
우리가 설치한 create-react-app 패키지를 써서 프로젝트를 만들어요.
주의! 꼭 sparta_react 폴더 경로에서 입력해주세요!
yarn create react-app week-1

프로젝트가 생성이 되면, sparta_react 폴더 아래에 week-1이라는 폴더가 생길 거예요.
VSCode를 열어서, [폴더 열기] → sparta_react → week-1 폴더를 선택해 열어주세요!

설치가 끝났다면, 아래 명령어를 입력해서 우리의 첫 리액트 앱을 실행시켜봅시다!

cd week-1 # week-1 폴더로 이동합니다.
yarn start
브라우저가 열리고 우리의 첫 리액트 앱이 실행되었습니다.

- JSX

리액트에서는 딱 하나의 html 파일만 존재합니다. 
(public 폴더 아래에 있는 index.html)

그럼 리액트에서 어떻게 뷰를 그릴까요? App.js 파일에서 보이듯, 
**JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서** 그립니다.

- HTML을 품은 JS === JSX!

    아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없어요.

    ```html
    <div>
    	<h1>안녕하세요!</h1> 
    	<p>시작이 반이다!</p>
    </div>
    ```

    그래서 나온 게 JSX입니다.
    자바스크립트 안에서 **html 태그같은 마크업**을 넣어 뷰(UI) 작업을 편하게 할 수 있죠! 

    ```jsx
    const start_half = <div>
        <h1>안녕하세요!</h1>
        <p>시작이 반이다!</p>
      </div>;
    ```

    **그럼 JSX에서 쓰는 <div>~~</div>는 DOM 요소인가요?**
    정확히는 React 요소예요!

JSX 규칙

1. 태그는 꼭 닫아주기

1. 무조건 1개의 엘리먼트를 반환하기

1. JSX에서 javascript 값을 가져오려면?

1. class 대신 className!

1. 인라인으로 style 주기

<p style="color: orange; font-size: 20px;">orange</p>

JSX

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

가상돔

가상돔이란?

DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다.
네, 맞습니다! DOM이 트리구조란 소리입니다.

DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다면?
→ 필요없는 연산이 너무 많이 일어난다!
→ 그래서 등장한 게 가상돔!
가상돔은 메모리 상에서 돌아가는 가짜 DOM입니다.
가상돔의 동작 방식: 기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현합니다)을 비교해서 정말 바뀐 부분만 갈아끼워줍니다! → 돔 업데이트 처리가 정말 간결하죠!

라이프 사이클

라이프 사이클이란?

컴포넌트의 라이프 사이클(= 컴포넌트 생명주기)은 정말 중요한 개념입니다!
컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이에요.
공식 문서에서도 자세히 다루고 있어요.

컴포넌트는 생성되고 → 수정(업데이트)되고 → 사라집니다.
생성은 처음으로 컴포넌트를 불러오는 단계입니다.
수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 됩니다. 아래의 경우죠!
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
- 또는, 강제로 업데이트 했을 경우! (forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있습니다.)
제거는 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계입니다.

그루트

i'm groot

이전 포스트

4일차

다음 포스트

6일차