React (1)

sunm309·2021년 6월 25일
1

nvm 설치하기

  1. homebrew 를 통해 nvm 설치하기

    brew install nvm
  2. ~/.nvm 디렉토리 생성

    mkdir ~/.nvm
  3. 설치 확인

    nvm -v
  4. nvm: not found ~~가 나오면 → 환경변수 설정하기 (터미널이 bash일 경우)

    vi ~/.bash_profile
    
    # i 키를 누르면 입력 모드로 전환
    # 아래 코드 붙여넣기
  5. 환경 변수 추가 (기존에 있는 내용 지우면 안됨)

    export NVM_DIR="$HOME/.nvm"
    [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"
    [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"
  6. 저장하고 나가기

    esc 키를 누르고
    :wq 입력 후 엔터
  7. 수정된 bash_profile 파일 적용

    source ~/.bash_profile
  8. 설치 확인 → nvm -v

DOM (트리 구조)

  • html 단위 하나하나를 객체로 생각하는 모델
  • ex ) "div태그"라는 객체는 하위의 어떤 값을 가지고 있는다 → 트리 구조라고한다

React

  • javascript 라이브러리

ES6

  • ES6 → 자바스크립트 표준 문법 중 하나

클래스란?

  • 특정 객체를 생성하기 위해 변수와 함수를 정의한다 (클래스 구성 → 객체를 정의하기 위한 상태와 함수로 구성)

    사용하는 이유? → 객체 단위로 코드를 그룹화하고 쉽게 재사용하려고

  • 클래스 상속 → 이미 만들어 둔 어떤 클래스를 가지고 자식 클래스를 만드는 것

    class Dog extends Animal {
    // extends는 Animal 클래스를 상속 받아 온다는 뜻
    }

let, const, Scope

스코프(Scope) → 변수에 접근할 수 있는 범위

  • var: 함수 단위
  • let: block 단위 (let으로 선언한 변수는 값이 변할 수 있다)
  • const: block 단위 (상수 → 한 번 선언한 값을 바꿀 수 없다)

Spread 연산자 (Spread 문법)

  • 어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내준다
let array = [1, 2, 3, 4, 5];
let new_array = [...array];
console.log(new_array) // [1, 2, 3, 4, 5]

조건부 삼항 연산자

  • if문의 단축 형태
  • 사용법 → 조건 ? 참일 경우: 거짓일 경우
let info = {name: "mean0", id: 0};
let is_me = info.name === "mean0"? true : false;
console.log(is_me); // true

Array 내장 함수

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); // [1, 2, 3, 4 ,5 ,6]
// 원본 배열은 그대로
console.log(array_num);

filter

  • 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어주는 함수
  • 원본 배열은 변하지 않고, 원하는 배열을 하나 더 만들 수 있다.
const array_num = [0, 1, 2, 3, 4, 5];
const new_array = array_num.filter((array_item) => {
	// 특정 조건을 만족할 때만 return 하면됨
	// return에는 true 혹은 false가 들어가야 된다.
	return array_item > 3;
});
console.log(new_array); // [4, 5]

concat

  • 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수
  • 원본 배열은 변하지 않는다.
const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
const merge = array_num01.concat(array_num02);
// 중복 값 제거 안됨
console.log(merge);	// [0, 1, 2, 3, 3, 4, 5]
  • 다른 내장함수와 함께 사용해서 제거할 수 있다 → Set
const merge = [...new Set([...array_num01, ...array_num2])];
console.log(merge) // [0, 1, 2, 3, 4, 5, ]

from

  • 배열로 만들고자 할 때, 유사배열을 복사해서 새로운 배열로 만들 때 사용
  • 새로운 배열을 초기화 만들 때(초기화)
    유사배열 → [어떤 값들...] 이 모양으로 생겼지만 배열의 내장 함수를 사용하지 못한다. (DOM nodelist)
// 배열화 하기
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array); // ["m", "e", "a", "n", "0",]

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들기
const text_array = Array.from('hello', (item, idx) => {return idx});
console.log(text_array); // [0, 1, 2, 3, 4]

// 새 배열 만들기 → 빈 배열을 초기화하기
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});
console.log(new_array); // [0, 1, 2, 3]

CRA(Create React App)

  • 웹사이트를 만들 때 필요한 것을 넣어 만든 패키지

React 폴더 구조

  • node_modules → 설치할 패키지들이 담길 폴더
  • public 폴더 아래에 있는 → 빈 html 파일 (리액트 html 파일은 딱 하나다)
  • src → App.js → HTML in JS 방식
    → JSX (리액트에서 사용하는 문법)
    → JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다.

JSX 규칙

1. 태그는 꼭 닫아주기

<img/>
<p></p>
<input type="text"> → 에러
<input type="text"/>

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

function App() {
  return
    <p>test<p>
    <div className="App">
      <input type="text"/>
    </div>	// → 에러
    
    
    <div className="App">
      <p>test<p>
      <input type="text"/>
    </div>	// 정상 작동
}

3. JSX에서 javascript 값을 가져올 때

const cat_name = "lucky";
// return 부분만 복사
  return (
    <div>
    	hello {cat_name}!
    </div>
  );

→ map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용

4. class 대신 className

id는 그대로 id

5. 인라인으로 style 주기

HTML

<p style="color: orange; font-size: 20px;">orage</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>
  );
}

0개의 댓글