TIL- 22.03.21 월

1. Input(학습)

Reference

• 코딩애플님 리액트 강의
• 라매개발자님 유튜브 강의

---

1. 리액트로 블로그 만들기

React의 내장함수 useState

• state란? : 변수처럼 데이터를 저장할 수 있는 공간.
• 최초에 상단에서 먼저 import 해와야 함.

import React, { useState } from 'react';

• 데이터 저장시 변수에 저장하거나 state에 저장할 수 있다.
• 변수에 저장하면 되지 왜 state를 써야하나?
  • 페이지 새로고침 없이 html을 re-rendering 하기 위해. 따라서 중요하거나 자주 변경될 데이터는 state에 저장.
• state에 저장할 수 있는 데이터: 원시형, 객체 모두 가능
• state 생성시 2가지 데이터가 들어있는 array가 생성됨.
  • [0]: state의 값
  • [1]: state 변경함수

// state 생성시 만들어진 배열을 구조 분해 할당한 예시.
// 변경함수 호출하여 state 변경.

let [조회수, 조회수변경] = useState(0);
// 조회수 = 0
조회수변경(1);
// 조회수 = 1

• state에 저장된 데이터 변경방법: 반드시 변경함수를 사용하여 변경
  1. 기존 state의 복사본을 만든다.
  2. 복사본에 수정사항 반영
  3. 변경함수(복사본);

구조 분해 할당(ES6 Destructuring 문법)

얕은 복사 vs 깊은 복사, reference data type

• 원시값: 대입시 깊은 복사, 객체: 대입시 얕은 복사
• shallow copy: 원본 객체 또는 복사한 객체가 값이 수정될 경우 변경사항을 공유함
• deep copy: 복사 이후 변경사항이 공유되지 않고(참조가 끊김) 원본과 사본 각각 수정가능
• 객체를 deep copy 하려면 전개연산자를 사용하여 대입.

Component

• 정의: 여러 html 코드들을 하나의 component로 묶은 모음.
• 왜 사용하나?
  1. 반복되는 html 코드를 쉽게 재사용하기 위해
  2. 자주 변경되는 코드를 묶어 해당부분만 재렌더링되게 하여 성능상의 이점
  3. 여러 component를 묶어 하나의 페이지 구성
• 단점: component를 많이 만들수록 state 관리 힘듬
• 사용법

// component 생성 - 함수 형태로 return 값에 묶을 내용 넣기
function Header () {
    return (
        <header>
            <h2>내 블로그</h2>
            <p>안녕하세요</p>
        </header>
    );
}

// component 사용 - 원하는 위치에 함수명으로 태그 사용
<Header></Header>

return 내에선 하나의 태그만 쓸 수 있다.

여러개 쓸 경우 하나의 태그 안에서 사용하거나 fragments 사용(<>, </>).

// fragment를 사용하여 return 안에서 여러 div 사용.
function App () {
    return (
        <>
        <div></div>
        <div></div>
        </>
    );
}

• 주의사항
  • 함수명 첫글자는 대문자로 써야만 렌더링됨.
  • return 내부에는 하나의 div만 사용가능.
  • 상위 component의 state를 사용하려면 props 문법 필요

React로 ui 만드는 방법(모달, 탭, 햄버거메뉴 응용가능)

• ui의 상태정보는 state에 저장한다.
• if문 사용이 불가능하므로 조건문은 삼항연산자를 사용한다.
• 버튼을 1번 누르면 동작하고 다시 누르면 원상태로 가려면 변경함수의 매개변수로 !state명 해주면 됨. 이후 표현식으로 삼항연산자의 참의 경우와 거짓일 경우에 동작한 상태와 기본 상태를 지정해주면 끝. (내가 최초에 썼던 방법: state가 최초에 1이고 클릭시마다 변경함수로 +1시키고 짝수면 켜지고 홀수면 꺼지게 삼항연산자 사용했음.)

2. Output(복습)

3. Reminder

• jsx 문법에서 왜 class=””를 사용할 수 없을까?
• 어떤 데이터를 state에 저장해야 할까?
• state에 저장된 데이터 변경방법은?
• onClick = {...} 중괄호 안에 함수명 적을때 함수명 옆에 소괄호를 붙이지 않는 이유는?
• state의 데이터를 deep copy하여 수정하는 방법은?
• 어떤걸 component로 만드는(묶는)게 좋을까?
• 리액트에서 조건문을 사용하려면?
• 리액트에서 ui개발시 ui의 상태정보는 무엇으로 저장할까?
• 얕은복사란? 깊은복사란?