React 기초 다지기 #1

웹의 동작방식:

• 요청과 응답으로 이루어진다.
• 클라이언트가 서버에게 데이터 요청을하고 서버가 그에 응답을해서 클라이언트에게 데이터를 내려준다
• 클라이언트: 우리가 웹사이트를 보는 도구
• 서버: 뿌려줄 데이터 것들을 (데이터 및 html(정적자원)) 을 만들어서 클라이언트에게 전달해주는 곳

그렇다면 서버리스(serverless)란?

• 서버가 없는게 아니라, 서버를 '내가 만들필요가 없다는' 말

DOM이란?

• 트리구조, 즉 html의 태그 하나하나를 전부 객체로 취급한다. (div태그 안에 p태그 및 a 태그들이 있다면 부모 노드안에 여러개의 자식노드가 있는 것)

자바스크립트 문법 (ES6 문법)

• Class: 객체 지향형 프로그래밍에서는 특정 객체를 생성하기 위해 변수와 함수를 정의하여 여러번 재사용할 수 있게끔 도와주는 틀
• 생성자 함수: 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화한다 (초기에 들어갈 값들을 받는 함수) - instructor()
• 부모클래스를 상속하여 클래스를 만들고 싶을 때:

class MyCat extends Cat {
  constructor (name, age):
      super(name); // 여기서 super는 부모 클래스의 constructor를 호출한다.
	  this.age = age;
}
showName() {
  return '내 고양이 이름은' + super.showName() + '입니다';
}

• spread 연산자: 객체안에 있는 요소들을 바깥으로 꺼내어 주는 역할.

let array = [1,2,3,4,5]
let new_array = [...array]

• 조건부 삼항 연산자: if문의 단축형태

let info = {name: "mean0", id : 0};
let is_me = info.name === "mean0"?true: false;

Array의 4가지 내장 함수들

• map: 배열에 속한 항목들을 변환할 때 자주쓰이는 내장 함수
• filter: 어떤 특정조건을 만족하는 항목들만 반환해서 배열로 만들어줄 때 쓰이는 내장 함수
• concat: 배열과 배열을 합치거나 배열에 요소를 추가해줄 수 있는 함수
• from: 쓰임새가 다양하다
  1 배열로 만들고자 하는것이나 유사배열을 복사해서 새로운 배열로 만들 때
  2 새로운 배열을 만들 때

const text_array = Array.from('hello', (item, idx) => {return idx});
// 값이 정해지지 않았을 때
const undecided_array = Array.from({length:4}, (item, idx) => {return idx});

JSX 문법

• 함수형 혹은 클래스형 컴포넌트들을 만들어서 필요한 것들만 HTML에 올린다 (SPA방식)

JSX 문법 규칙

• Tag는 무조건 닫혀야 한다.
• 부모 태그안에 모든 태그들이 담겨야한다.
• Javascript의 class는 React에서는 className으로 명시해야 한다.

Component

• 함수형 컴포넌트 (리액트 공식문서에서는 함수형 컴포넌트를 좀 더 지향하는 쪽으로 쓰이고 있다)
• 클래스형 컴포넌트

컴포넌트에서 데이터를 다루는 방법 (State and Props)

State: 컴포넌트가 가지고 있는 데이터 (내가 마음대로 삭제, 수정할 수 있는 데이터)
Props: 보통 부모 컴포넌트로 부터 가져오는 데이터

컴포넌트를 예쁘게 꾸미는 방법 (SASS, SCSS)

• SASS: CSS를 편하게 쓸수 있게 해주는 문법
• SCSS: SASS 와 CSS가 서로 호환을 잘 하게 해주는 친구

SCSS 기본 문법:

• 상위요소 띄어쓰기가 가능하다.

div {
  background-color: green
  &:hover { background-color: blue}

• 문자열을 치환할 수 있다.

//scss
$bgColor : yellow;
.App{
  background-color: #{$bgColor}
}

Styled-components: 리액트 컴포넌트 스타일링 방법중 하나. (SCSS, 변수선언해서 style을 먹여주는 등 다양한 방법중에 하나다).

Styled-components 장점

• class 이름짓기에서 해방된다.
• 컴포넌트에 스타일을 적기 때문에, 굉장히 직관적이다.

import styled from 'styled-components';

const App(props) => {
  return (
    <div className = "App">
    <MyStlyed bgColor = {"red"}>Hello React</Mystyled>
    </div>
    
   );
}


const MyStyled = styled.div`
	width: 50vw,
    min-height : 150px,
    padding: 10px,
    border-radius: 15px,
    color: #fff,
    &hover : {
     background-color: ${(props) => (props.bgColor)};
}
`

라이프 사이클에 대해서...

• DOM 은 트리구조다 라는 것을 배웠다
• 그렇다면 DOM 에 수정할 때마다 모든 DOM을 뒤지고 찾아야한다면? 굉장히 비효율적
• 필요없는 연산이 너무 일어나기 때문에, 가상 DOM이라는 개념이 생겼다!
• 가상 DOM의 동작방식: 기존DOM과 가상DOM 을 비교해서 다른 부분만 갈아끼운다!

어떨 때 DOM을 새로 그릴까?

• 처음 페이지 (렌더링)을 했을 때
• 데이터가 변했을 때 (리렌더링)

라이프 사이클?

• 컴포넌트의 생명주기, 즉 렌더링부터 시작해서 없어질때까지의 주기를 일컫는다.

알아두면 좋은 라이프 사이클 함수!

• 라이프 사이클 함수는 클래스형 컴포넌트에서만 (constructor, render()) 사용할 수 있다.

• constructor(): 생성되었을 때 호출되는 함수

• render(): 컴포넌트의 모양을 브라우저에 보여주는 함수

• componentDidMount(): 컴포넌트가 화면에 나타났을 때 호출되는 함수. 첫 렌더링할때만 사용되는 함수이다.

• componentDidUpdate(): 컴포넌트의 데이터를 변환했을 때 호출되는 함수 (리렌더링), 이전의 state&props 데이터와 현재 state&props 데이터를 비교할 때 쓸 수 있다.

componentDidUpdate(prevProps,prevState){
  console.log(prevProps,prevState)
}

• componentWillUnmount(): 컴포넌트가 DOM에서 제거될 때 쓰이는 함수

Ref! 리액트에서 돔 요소를 가져오려면? React.ref함수를 사용해보자!

import React from "react";

class App extends React.Component{
  constructor(props){
    super(props);
  
  this.state = { list: ['영화관 가기', '매일 책읽기', '수영배우기'],};
  this.text = React.createRef();    //버튼의 인풋값을 가져오고 싶을 때 쓴다.
  }
  componentDidMount(){
    console.log(this.text);
    console.log(this.text.current); //input값을 current라는 변수명 안에다가 담아두고 있다.
  }
  render(){
    return(
      <div>
        <input type ="text" ref = {this.text}/>
      </div>
      }    
 

State의 관리

• 단방향 데이터 흐름(관리): 데이터는 위에서 아래로만 데이터가 흐른다 (부모 컴포넌트만이 자식컴포넌트에게 데이터를 넘겨줄 수 있다.)
• 클래스형 컴포넌트에서 state 관리 & 함수형 컴포넌트에서 state 관리

class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      count : 3,
    };
  }

  render(){
    return(
      <div className = "App">
        <Nemo>nemo</Nemo>
      </div>
    )
  }
}

const Nemo = styled.div`
width : 150px;
height: 150px;
background-color : #eee;
margin: 10px;
`;

styled-components를 만들어서 컴포넌트를 꾸며주는것과 style = {{}}바로 먹여주는 거에서 문법의 차이가 조금씩 있다는 것을 인지해야한다. 예를들어, styled-components에서는 background-color with #eee라고 명시하지만 태그에 style을 직접 쓸때에는 backgroundColor라고 하고 그리고 '#eee'이렇게 한다.

Class형 컴포넌트에서 state관리 방법: setState

class App extends React.Component {
 constructor(props){
   super(props);
   
   this.state = {
     count: 3,
   }
 }
  addNemo = () => {
    this.setState({this.state.count +1};)
  }
  removeNemo = () => {
    this.setState({this.state.count -1);)
  }
  
  render(){
    return(
      )
    

함수형 컴포넌트에서 state관리 방법: useState

import React from "react;

const Namo = (props) => {
  const [count, setCount] = React.useState(); // 첫번째 인자(count)는 state값을 불러다 주는 변수를 가져온다. setState는 나중에 데이터 변경시킬 때 함수 명을 말한다.
  const nemo_count = Array.from({length: count}, (v,i) => {return i});
  
  const addNemo = () => {
    setCount(count +1);
  }
  const removeNemo = () =>{
    if(count > 0){setCount(count-1)}
    else{window.alert("더 이상 네모가 없습니다");}
  }
  }
	return (<div className = "App">
        {nemo_count.map((num, idx) => {
          return(
            <Nemo key = {idx}>nemo<Nemo>
    )})
   }
        
              

Event Listener란?

• 사용자가 어떤 행동을 하는지 안하는지 (=이벤트) 지켜보다가 알려주는 것이다
• 대표적인 예) 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 있다.