[스파르타 _ 리액트 과정] 27일차

et Ji·2022년 12월 6일

2차배열 만들기 JSX 내배캠 리액트 리액트 기초 스파르타 코딩클럽

TIL

목록 보기

32/40

📅 학습 일자 : 22. 12. 06

📜 진행 내용

[과제] 알고리즘 문제 풀기
[강의] 자바스크립트 심화
- Chap-04. callback
🚩 학습 목표
- Chap-04. 개념 이론에 익숙해지기
[강의] 리액트 입문주차
- 14 ~ 끝
- 컴포넌트
[강의] 리액트 실무 기초
- 1주차 완강

💡 배운내용

▣ 알고리즘 문제 풀기

오늘 과제로 주어진 문제는 배열 메서드로 풀었지만, 이차 배열 만드는 방법 정리해 봄.

이차 배열 만들기

new Array( ) + for loop 사용하기

let arr = new Array(5)
console.log(arr) // (5) [empty × 5] 

for(let i = 0; i < arr.length; i++){
    arr[i] = new Array(2);
}

console.log(arr)

// (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
// 0: (2) [empty × 2]
// 1: (2) [empty × 2]
// 2: (2) [empty × 2]
// 3: (2) [empty × 2]
// 4: (2) [empty × 2]

생성 함수 만들기

function create2DArray(rows, columns){
    let arr = new Array(rows);
    for (let i = 0; i < rows; i++){
        arr[i] = new Array(columns)
    }
    return arr;
}

create2DArray(5, 2)

// (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
// 0: (2) [empty × 2]
// 1: (2) [empty × 2]
// 2: (2) [empty × 2]
// 3: (2) [empty × 2]
// 4: (2) [empty × 2]

Array 객체에 배열 생성함수 추가 - innerArray를 생성, 초기값 지정 가능

Array.matrix = function(m, n, initial) {
    let a, i, j, mat = [];
    for (i = 0; i < m; i += 1) {
        a = [];
        for(j = 0; j < n; j += 1){
            a[j] = initial;
        }
        mat[i] = a;
    }
    return mat;
};

let arr = Array.matrix(5, 2, 0)

arr

// (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
// 0: (2) [0, 0]
// 1: (2) [0, 0]
// 2: (2) [0, 0]
// 3: (2) [0, 0]
// 4: (2) [0, 0]

ES6 최신 문법

**const arr1 = Array.from(Array(5), () => new Array(2))**

arr1

// (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
// 0: (2) [empty × 2]
// 1: (2) [empty × 2]
// 2: (2) [empty × 2]
// 3: (2) [empty × 2]
// 4: (2) [empty × 2]

**const arr2 = Array.from(Array(5), () => Array(2).fill(0))**

arr2

// (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
// 0: (2) [0, 0]
// 1: (2) [0, 0]
// 2: (2) [0, 0]
// 3: (2) [0, 0]
// 4: (2) [0, 0]

▣ 리액트 기초

리액트에서는 JSX 문법을 사용해서 ‘리액트요소’를 만들고 요소를 DOM에 렌더링 시켜준다.
- 리액트에서는 HTML파일이 딱 1개이다. 그래서 뷰를 그리는 내용이 JSX문법에 의해 자바스크립트에 들어간다.
JSX란? 간단히 말해 HTML을 품은 자바스크립트다.

JSX 규칙

태그는 꼭 닫아주기

예)
- input 태그를 닫지 않고 넣을 경우 > Unterminated JSX contents 에러 발생
```
function App() {
  return (
    <div className="App">
      <input type='text'>
    </div>
  );
}
```
- 수정 - 아래와 같이 잘 닫아주기
```
<input type='text'/>
```

무조건 1개의 엘리먼트를 반환하기 (return)

하나보다 많아도 적거나 없어도 안되며, 없을 경우 null이라도 넣어줘야 된다.
```
function App() {
  return null;
}
```

예)

return 아래에 p태그를 하나 추가 > Parsing error 에러 발생

return (
    <p>안녕하세요! 리액트 반입니다 :)</p>

    <div className="App">
      <input type='text'/>
    </div>
  );

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/04414c10-53cc-456f-8b3c-0812b7adf7b0/_2020-10-04__10.59.09.png

수정 - 하나의 div 태그로 감싸주기

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );

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

{ } 중괄호를 쓴다!

	const cat_name = 'perl';
// return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 해봅시다.
    return (
      <div>
        hello {cat_name}!
      </div>
    );

👉 값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */}
      {/* 삼항 연산자를 사용했어요 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

리턴 안에서는 if문을 사용하지 못한다. 대신 삼항 연산자를 사용해야된다.

function App() {
  let name = 'hoesu';

  return (
    <div className='App'>
      {name !== '1' ? name : 1}
    </div>
  );
}

class 대신 className!
- JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 class대신 className으로 사용.
  id는 그냥 id로 사용.
```
<div className="App" id="header-box">
```

인라인으로 style 주기

👉 html 태그에 인라인으로 style 넣던 방식에서 조금 다르다.
css 문법 대신 json 형식으로 넣어주면 끝!

HTML

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

JSX
- 리액트에서 자바스크립트를 넣고 싶을 경우 기본적으로 { } 중괄호를 사용하고, string이 아닌 객체로 넘겨줘야된다.
- 그렇기 때문에 {{ }} 중괄호가 중첩된 형태

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트기 때문.
// 스타일 사용법 1 
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

// 스타일 사용법 2 : 스타일 딕셔너리를 변수로 만들고 사용!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

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