React를 배워야하는 이유

대표적인 프론트엔드 도구로는 React, Angular, Vue 가 있다.

그런데 왜React를 배우는게 좋을까?

1. 가장 많은 사용자 수

그래프를 보면, npm에서 다운로드된 도구들의다운로드 경향을 보여주는사이트다.

그래서 경향을 본다면, 최근에 angular, vue보다 5배 이상의 다운로드 수를 보여주고 있다.

그만큼 인기가 있다면 더 실용적이고 활용할 부분이 많기 때문이라고 추측할 수 있다.

2. 하나를 배우면 웹, 안드로이드, IOS, DESKTOP을 동시에 개발할 수 있다

React는웹을 만드는 도구다.
EX) 페이스북, 인스타그램, 트위터, 넷플릭스 ..etc

React-Native는모바일 앱을 만드는 도구다.
EX) 페이스북, 인스타그램, 에어비엔비, 우버이츠 ..etc

Electorn은 React로 만들어진 웹 사이트를DESKTOP에서 실행되도록 하는 도구다.
EX) VSCode, Github Desktop, Discord ...etc

따라서 React를 공부하면,React-Native와 비슷하기 때문에크로스 플랫폼으로 하나로 만들어안드로이드,IOS두 곳 모두 배포할 수 있다.

React Component

컴포넌트란 UI 또는 기능을부품화해서재사용이 가능하게 하는 것이다.
즉,동일한 UI를 재활용하고,안의데이터와 이미지만 바꿔주는 것이다.

컴포넌트는 복사/붙여넣기와는 다르다!!
컴포넌트는 원본 하나를 만들어서 뿌려주는 개념이다!!

데이터는 각 컴포넌트에 맞게 변경하여 사용이 가능하다.

Class Component VS Function Component

React에서컴포넌트 작성 방법은 2가지가 있다.

함수형이 더 간결하게 만들어진다.

또한화살표함수로도 적용이 가능하다.

React는 처음에 클래스형 방법만 존재했다. 하지만 클래스 형식은 어렵고, 복잡하여 함수형 컴포넌트가 추가된 것이다.
최근 여러 기업에서는 함수형 컴포넌트를 따르는 추세이다.하지만, 기존에 만들어진 서비스들은 클래스형으로 되어있는 경우가 많으므로, 둘 다 알아두자.

React-Hooks

함수형 컴포넌트를 사용하기 위해서는 추가적인 것이 필요하다.
그래서 React에서함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 도구를 만들었다. 이를 Hooks라고 한다.
대표적인Hooks에는useState,useEffect가 있다.

state 와 함께 쓰이는 것들(feat. setState, useState)

state란 리액트 컴포넌트에서 데이터를 담기 위한 상자같은 것이다.
자바스크립트에서 데이터를 담기 위한 상자로변수를 알고 있다.
즉, state는 컴포넌트에서 사용하는 변수이다.

setState: 컴포넌트에서 사용하는 변수를 바꿔주는 기능
useState: 컴포넌트에서 사용하는 변수를 만들어주는 기능

//리액트 컴포넌트에서 변수 만들기
const [변수명] = 변수만드는기능(담을내용) ==> const [classmate] = useState("길동")

//리액트 컴포넌트에서 변수 바꾸기
const [변수명, 변수바꾸는기능] = 변수만드는기능(담을내용)
const [classmate, setClassmate] = useState("길동")
setClassmate("철수")		//classmate 가 철수로 바뀜.

그런데 왜? React에서는 let을 안쓰고 state를 변수로 사용하는가?

리액트 컴포넌트는 앞쪽에화면에 보여지는 부분과 뒷쪽에데이터를 관리하는 부분으로 나눌 수 있다.

만약, 단순히자바스크립트 변수 let, const를 사용하여 좋아요를 화면에 그렸다면, 좋아요가 증가해서 17로 변경되었을 때, 뒷쪽의 데이터 부분만 변경되고, 앞의 화면에는 반영이 되지 않는다.

하지만, 컴포넌트 변수 state를 사용해서 화면에 그리고, setState()를 사용해 좋아요를 변경하면,setState() 안에서 화면을 새롭게 그리는 명령을 실행하여 변경된 데이터가 화면에 새로 그려진다.

// let으로 count 예제 실험해보기
function New() {
    let count = 0     // let으로 **자바스크립트 변수** 만들기
    
    function handleClick() {
        count = count + 1     // 갯수는 증가했지만, 화면에는 **반영이 안됨**
    }

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={handleClick}>let을 사용하여 count 증가</button>
        </div>
    )
}

export default New

// state로 count 예제 실험해보기
import { useState } from 'react'

function New() {
    const [count, setCount] = useState(0)     // state로 **컴포넌트 변수** 만들기
    
    function handleClick() {
        setCount(count + 1)     // 갯수가 증가하면서, 화면에 정상적으로 **반영됨**
    }

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={handleClick}>state를 사용하여 count 증가</button>
        </div>
    )
}

export default New

실무에서는 회원가입, 게시물작성 등을서버컴퓨터에 전송하기위해 변수를 담아 둘 때사용한다.
또 작성한 내용을 검증하고잘못된 부분을 표시할 때사용한다.

1. 서버컴퓨터에 전송하기 위해 state에 담아두기
   

import { useState } from "react"

function Login () {
    const [id, setId] = useState('')
    const [pw, setPw] = useState('')

    function handleChangeId(event) {
        const value = event.target.value
        setId(value)
    }

    function handleChangePw(event) {
        const value = event.target.value
        setPw(value)
    }

    return (
        <div>
            <h1>로그인</h1>
            <div>아이디 {id}</div>
            <input type="text" onChange={handleChangeId}/>
            <div>비밀번호 {pw}</div>
            <input type="text" onChange={handleChangePw}/>
        </div>
    )
}

export default Login

2. 작성한 내용을 검증하고 잘못된 부분을 표시

import { useState } from "react"

function Login () {
    const [id, setId] = useState('')
    const [pw, setPw] = useState('')
		**const [errorId, setErrorId] = useState('')
    const [errorPw, setErrorPw] = useState('')**

    function handleChangeId(event) {
        const value = event.target.value
        setId(value)
    }

    function handleChangePw(event) {
        const value = event.target.value
        setPw(value)
    }

		**function handleClickLogin() {
        if(id === "") {
            setErrorId('! 아이디를 정확히 입력해 주세요.')
        }
        if(pw === "") {
            setErrorPw('! 비밀번호를 정확히 입력해 주세요.')
        }
        if(id !== "" && pw !== ""){
            alert('아이디와 비밀번호가 모두 입력되었습니다. 로그인을 시작합니다.')
        }
    }**

    return (
        <div>
            <h1>로그인</h1>
            <div>아이디 {id}</div>
            <input type="text" onChange={handleChangeId}/>
						**<div style={{color: 'red'}}>{errorId}</div>**
            <div>비밀번호 {pw}</div>
            <input type="text" onChange={handleChangePw}/>
						**<div style={{color: 'red'}}>{errorPw}</div>
						<div>
                <button onClick={handleClickLogin}>로그인</button>
            </div>**
        </div>
    )
}

export default Login

React Debugging Tool

리액트를 개발하는데 도움을 주는 크롬 도구가 있다.
크롬에서 React-Developer-Tools를 설치.

다운로드:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko

리액트로 만들어진 홈페이지에서 개발자도구를 열면, 자동으로Components메뉴가 만들어진다. 또한 컴포넌트가 가지고 있는 변수인state도 확인이 가능하다.