리액트 기초 1강 정리

기초체력 1 : 서버와 클라이언트, 서버리스, DOM

 

웹의 동작 방식: 서버와 클라이언트

웹이 어떻게 우리한테 보이게 될까?

웹은 두가지로 이루어짐. 요청과 응답!

 

요청은 우리가 웹사이트를 볼 수 있게 해주는 클라이언트. 

클라이언트는 노트북, 핸드폰, PC가 될 수 있음. 

 

클라이언트가 서버에게 요청을 보냄. 이 때 서버는 html, JS, CSS같은 정적 자원들 혹은 데이터라고 부르는 친구들을 전달해줌. 이걸 응답한다고 얘기함.

 

그럼 웹의 동작 방식은?

1. 클라이언트가 서버에게 요청을 보낸다. 

2. 서버는 응답을 해준다.

 

서버리스:

서버가 없다는게 아니라 서버를 내가 만들 필요가 없다는 뜻!

 

DOM:

DOM은 트리구조다.

 

기초체력 2: ES6 - 클래스, let, const, SCope, == ===, Spread 문법, 조건부 삼항 연산자

 

ES6? 자바스크립트 표준 문법 중 하나로 가장 보편화된 문법

 

 

기초체력 3: Array 내장함수 - map, filter, concat

 

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);

 

 

JSX

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

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

App.js

// 엇? 파이썬에서 뷰티풀스프를 불러올 때 본 것 같기도 하죠?
// *react*에서도 다른 패키지를 불러다 쓸 수 있습니다!
// import [패키지명] from [경로] 이 형식으로 불러와요.
import React from 'react'; 
// js 파일 뿐 아니라 이미지도 가능가능!
import logo from './logo.svg';
// css? 가능!
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

JSX 사용법

 

-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;

-인라인으로 style 주기

html 태그에 스타일을 직접 넣던 거 기억하시나요? 거기에서 아주 조금 달라요! css 문법 대신 json 형식으로 넣어주면 끝!

 

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>
  );
}

 

Components

 

Component는 클래스형과 함수형이 있음

리액트가 레고라면 컴포넌트는 블럭이다! 블럭처럼 컴포넌트를 잘 쪼갤 수 있어야 한다!

 

state와 props

 

state: state는 Component가 가지고 있는 데이터

props: Component가 부모 Component로부터 받아온 데이터

 

const BucketList = ({list}) => {
    
    // Quiz 1: my_list에 ['a', 'b', 'c'] 대신 부모 컴포넌트가 넘겨준 값을 넣으려면 어떻게 해야할까요?
    const my_lists = ['a', 'b', 'c'];
    
    //답은
    const my_lists=list;

const BucketList=(props)라고 받아왔던 것 같은데 안에 {list}가 있네? 차이는?

이 때 {소괄호} 안에 {키값}을 넣어줄 경우는 list안에 있는 내용만 가지고 오고 싶을 때 그렇게 씀.

 

ex. {list:[1,2,3]}의 경우 [1,2,3]이라는 value값만 가지고 오고 싶을 때 그렇게 씀!

 

 

-React에서 CSS 사용하기

style.css 파일 만들어줘서 

App.js에서 받아오는거 신세계!

 

 

메인 화면 만들어보기!

큰 흐름 정리:

App.js를 메인으로? 두고 Start.js를 자식 컴포넌트로 만든 후 

여기다 구체적으로 꾸며주고 App.js 통해서 화면 확인.

전체적인 틀이 나왔다면 App.css 파일에 Start.js에 클래스네임 달아준 것들 가져와서 구체적으로 꾸며줌!

 

이렇게 틀만 잡고 틀이 잘 나오면 이쁘게 꾸미는건 css 봐가면서 꾸며줌!

 

오늘 배운 점: 

영혼없이 인강 듣는 것은 안들은 것과 같다. 

나름 열심히 들었다고 생각했는데 코드 복붙하면서 머리로만 쓱 지나가니까 진짜 쓱 지나가서 생각 1도 안남.

답을 듣더라도 한발짝 먼저 생각해보기.