[TIL] 22.11.01 - React Component, useState

nana·2022년 11월 1일
0

TIL

목록 보기
18/50
post-thumbnail

React

React를 사용하면 여러 페이지들을 부품(Component)단위로 만들어 조립할 수 있다.

  • React.js : 웹을 만든다.
  • React-Native : 모바일 앱을 만든다. 크로스 플랫폼 가능 (하나를 만들면 안드로이드 / IOS 두 곳 모두 배포할 수 있다.)
  • React + Electron : PC앱을 만든다. (React로 만들어진 웹사이트를 한글, PPT와 같은 데스크톱 프로그램에서 실행되도록 하는 도구)

Component

UI 또는 기능을 부품화해서 import시 재사용 가능하게 하는 것이다.
변경이 필요할때 원본 컴포넌트만 수정하면 되고, 데이터는 각 컴포넌트에 맞게 변경해주면 되기 때문에 관리하기가 편리하다.

페이지도 하나의 큰 컴포넌트 이다.

컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다.
클래스형 컴포넌트보다 함수형이 더 간단하고 편리해서 대부분 함수형 컴포넌트를 사용한다.

1) 클래스형 컴포넌트

기존방식으로 최근에는 잘 사용하지 않는다.
그렇지만 클래스형 컴포넌트 사용 방법도 알아야 한다.

클래스형을 반드시 알아야 하는 이유

  • 큰 회사는 클래스형으로 만든 사이트가 존재한다.
  • 클래스형을 함수형으로 바꾸는 프로젝트를 맡을 수 있다.
  • 검색한 코드가 클래스형인 경우 도움된다.

2) 함수형 컴포넌트

최근방식

화살표 함수로 표현 가능하다.

const New = () => <div>내용</div>
export default New

React-Hooks의 함수형 컴포넌트

Hooks

import { useState, useEffect } from "react"

React 전용 변수, 도구를 함수 안에서 사용할 수 있도록 도와준다.


react 전용변수 hook

use로 시작하는 변수들은 react 전용변수 hook이다.
(useState, useEffect 등)



useState

State는 컴포넌트에서 사용하는 변수이다.

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

📌 실무에서 { state, setState, useState }는 언제 사용할까?
1) 회원가입, 게시물작성 내용 등을 서버컴퓨터에 전송하기위해 변수에 담아둘 때 사용
2) 작성한 내용을 검증하고 잘못된 부분을 빨간색으로 표기할 때 사용

변수 만드는 방법

const [변수명] = 변수만드는기능(담을내용)

const [count] = useState(0)
const [writer] = useState("")

변수 바꾸는 방법

const [변수명, 변수바꾸는기능] = 변수만드는기능(담을내용)

const [count, setCount] = useState(0)
setCount(5) // count가 0에서 5로 바뀐다.

const [writer, setWriter] = useState("")
setWriter("작성자")	// writer가 빈 문자열에서 "작성자"로 바뀐다.

State를 이용하면 document.getElementById() 등을 사용하지 않아도 돼서 편리하다.


예시) 로그인 정보를 state에 담아두고 검증하기

import { useState } from "react"

export default 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>
    )
}

📌 자바스크립트의 event
자바스크립트에서의 event 는 사용자가 어떤 행위를 했는가를 알려준다.
evevt.target 은 행위가 적용된 대상 즉, 태그를 의미한다.
그리고 event.target.value 는 작동된 태그에 입력된 값을 의미한다.


app.js

최초 접속 페이지를 보여주며, 모든 페이지의 설정파일을 담당한다.

MyApp 함수 return 윗부분에는 모든 페이지에 공통적용 되는 설정을 입력할 수 있다.
return부분에 Componet로 모든 페이지들을 가져올 수 있다.


profile
프론트엔드 개발자 도전기

0개의 댓글