React

: FaceBook에서 개발한 사용자 인터페이스를 위한 라이브러리

사용자 인터페이스?

사용자와 컴퓨터 시스템이 상호 간에 정보를 원활하게 주고받을 수 있도록 돕는 장치나 소프트웨어.

라이브러리(Library)

누군가 만들어 놓은 기능

Library는 사전적으로 도서관을 의미한다. 도서관(라이브러리)에 가서 내가 읽고싶거나 필요한 책(기능)을 빌린다(응용한다).

프레임워크(Framework)

만들어진 뼈대

프레임워크는 뼈대 위에 코드를 작성한다. 프레임워크의 기능만 사용해야한다는 단점이 존재.

🤲
라이브러리는 사용자가 라이브러리를 불러서 사용
프레임워크는 사용자가 프레임워크에서 필요한 코드를 빌려서 사용

React를 배워야하는 이유

1. npm trends에서 보면 react의 사용자가 최근들어 계속 angular, vue보다 5배 이상의 다운로드 수를 보여주고 있다.
2. React는 웹을 만드는 도구이고, React-native는 모바일 앱을 만드는 도구이다. React와 굉장히 흡사하여 React만 잘 배워두면 앱도 개발할 수 있다.

import / export

defalut export - import

default export

export default fuction BoardWriteUI "./BoardWrite.styles"

하나의 파일에서 하나의 개체만 넘기는 방식

import

import BoardWriteUI from "./BoardWrite.presenter"

export로 내보낸 개체를 'import'를 활용해서 가져오기

exprot default 로 내보낸 값을 가져올 때는 import 뒤에 {중괄호}를 적지 않아도 된다.

named export - import

named export

export const MyButton = styled.button`
    background-color: black`

최상위 항목이라면 다 내보낼 수 있다

import

import { MyButton, Title } from "./BoardWrite.styles"

{중괄호} 안에 가져올 항목을 적는다. 

JSX 문법

• JavaScript eXtension
• React 전용 문법
• HTML 문법을 JavaScript 코드 내부에 쓰는 문법
• React에서 HTML을 표현할 때, JSX를 사용한다.

👉JavaScript 안에서 HTML문법을 사용해서 view 구성을 도와주는 문법

<button id="aaa" onClick = {zzz}>안녕하세요</button>

사용 규칙

• 속성은 "쌍따옴표"로 감싼다.
• 태그는 닫혀야한다.
• 셀프클로징 가능

	 <div> </div> => <div/>  

• 형제 노드를 작성할 수 없다. 반드시 div 나 fragment 태그로 감싸야한다.

	      ❌		  ⭕️
	 <div> <div/>       <>
    	 <div> <div/>         <div> <div/> 
                              <div> <div/>
  	                    </>

Emotion

• React의 CSS
• CSS-in-JS 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다.

	😑 CSS-in-JS?
    	    JavaScript 파일 안에 CSS를 넣는다.
   	    JavaScript 와 CSS 사이 상수와 함수 공유
	    CSS를 컴포넌트(JavaScript파일) 영역으로 불러들이게한다.

• 기존 CSS 방식과 비교

기존 CSS 방식

.title {
  width: 996px;
  height: 52px;

.title : class 선택자(CSS)

Emotion

const Title = styled.div
	width: 996px;
	height: 52px;

const Title : 상수(JavaScript)

→ 태그처럼 사용 가능 

<Title>Hello wrold</Title>

CSS-IN-JS(emotion) 실습

index.js

import {MTitle, IdInput, PwInput, LoginButton, Wrapper} from '../../styles/Example'

export default function EmotionPage(){


    // return 위쪽은 Javascript 쓰는곳
    // return 아래는 HTML 쓰는곳
    return(
        <Wrapper>
            <Title>로그인화면</Title>
            아이디: <IdInput type="text"/><br/>
            비밀번호: <PwInput type="password"/><br/>
            <LoginButton>로그인</LoginButton>
            <img src="lotto.png" />
        </Wrapper>    
    )
}

styles

import styled from '@emotion/styled'

export const MyDiv = styled.div`
    width: 500px;
    height: 500px;
    background-color: red;
`

export const Title = styled.h1`
    color: blue;
`
export const IdInput = styled.input``
export const PwInput = styled.input``
export const LoginButton = styled.button``

export const Wrapper = styled.div`
    background-color: skyblue;
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: ceneter;
`

Component

컴포넌트란 UI 또는 기능을 부품화해서 재사용 가능하게 하는 것이다.

클래스형 컴포넌트 vs 함수형 컴포넌트

클래스형 컴포넌트

import {Component} from "react"
class New extends Component {
  render() {
    return <div>이것은 클래스형 컴포넌트 입니다</div>
  }
}
export default New

함수형 컴포넌트

function New() {
  return <div>이것은 함수형 컴포넌트 입니다</div>
}
export default New

함수형이 훨씬 간편하다.