[코드캠프]프론트엔드 2일차_TIL

윤성해·2023년 3월 14일

프론트엔드_TIL

목록 보기

2/27

🏷️ 수업 목차

리액트 (리액트로 자바스크립트)
React component
React-Hooks
state 종류

✏️ 오늘의 TIL

1. React

리액트는 부품 조립방식으로 개발이 진행됩니다.(컴포넌트 기반)
리액트의 핵심은 컴포넌트!! 그렇다면 컴포넌트란?

UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것

기존에 페이지를 각각 만들었다면 리액트는 부품을 만들어서 조립하는 방법이라서, 큰 서비스를 만들때 유리합니다!

복사 vs 컴포넌트
컴포넌트는 아래의 이미지처럼 동일한 UI를 재활용하고, 안에 데이터와 이미지만 바꿔줍니다.

원본만 변경하면 모두 변경되는 컴포넌트(import로 가져오기)에 비해 복사/붙여넣기로 코드를 작성하고 모든 UI를 노란색으로 변경하려면, 코드를 하나하나 수정해주어야 합니다.

2. 클래스형 컴포넌트 VS 함수형 컴포넌트

리액트에서 컴포넌트 작성 방법은 2가지가 있습니다.

함수형이 훨씬 간단해보이고, 함수형은 화살표 함수로도 적용이 가능합니다.

리액트는 처음에 클래스형 방법만 존재하다가 함수형 컴포넌트 방법이 추가된 것입니다. 최근에는 많은 기업들이 함수형 컴포넌트를 주로 사용하지만, 아래의 이유들로 클래스형도 알아야하고, 바꿔서 작성하는 방법도 알아야 합니다.

3. React-Hooks

클래스에서 사용하던 기능들을 함수형에서는 모두 흉내낼 수 없습니다. 그래서 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 도구를 만들어 주었습니다. 이 도구를 Hooks(훅) 이라고 부릅니다.
대표적인 훅에는 useState, useEffect가 있는데, 보통 use어쩌구 하면서 시작됩니다!

4. state 종류들

state란 리액트 컴포넌트에서 데이터를 담기 위한 상자입니다.
자바스크립트에서 데이터를 담기 위한 상자로 변수를 사용했습니다.
다시 말해, state는 컴포넌트에서 사용하는 변수입니다.

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

1) useState로 State변수 만들고, 바꾸기

// 자바스크립트에서 변수 만들기
변수만드는기능 변수명 = 담을내용           ==>    let classmate = "철수"

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

// 자바스크립트에서 변수 바꾸기
let classmate = "철수"
classmate = "영희"       // classmate 가 영희로 바뀝니다.

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

❗️let은 리액트 전용 html에서 변경을 감지하지 못하기때문에 state 써야함!

2) 변수 만드는 방법 비교

여기서 const(변수)는 let 해도됨 아무거나 쓴거임

(0)은 카운트에 넣어준 초기값을 의미함

[] (대괄호)는 그냥 외우기 공식이라 생각하기 => 원리는 일단 나중에

setCount -> 변수 바꿔주는 함수

useState -> 컴포넌트 만들어주는 (변수 만들어주는 함수)

3) 변수 바꾸는 방법 비교

위 보면 딱히 전꺼보다 편해보이지는 않지만, 전체적인 코드를 보았을 때 매우 편리하고 간단함.
-> state 이해하면 document.getElementById()...이런거 안해도 된다!

4) 추가! 기존 html vs React의 state 방식

state변수는 html이랑 합체가 되고, 전체적인 코드 길이가 훨씬 짧아집니다.

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

서버 컴퓨터에 전송하기 위해 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

작성한 내용을 검증하고 잘못된 부분을 빨간색으로 표기하기

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

❗️ 자바스크립트의 event
→ 자바스크립트에서의 event 는 여러분들이 어떤 행위를 했는가를 알려주는 것 이고,
evevt.target 은 행위가 적용된 대상 즉, 태그를 의미합니다.
그리고 event.target.value 는 작동된 태그에 입력된 값을 의미합니다.

on으로 시작하는 함수는 event를 받는 경우가 많은데 이것들을 이벤트 핸들러 함수 라고 합니다.

🤷🏻‍♀️궁금한 것

❗️알게된 것

깃허브 commit하기
터미널에서 yarn dev를 종료하려고 하는데 컨트롤+c가 잘 안되었다.
해결 방법으로 port kill 명령어를 사용해서 끌 수 있음!
1. lsof -i :portnum : lsof -i :portnum 명령어로 사용중인 해당 Port의 PID를 확인할 수 있다.
2. kill -9 portnum : kil -9 portnum 명령어로 해당 PID의 Process를 종료할 수 있다.
  참고한 포스팅
리액트로 css 할 때 tip
-> 세로 길이는 제한을 두지 않는 것도 좋다. (전체 세로사이즈 정해버리면 안에 친구들이 찌부된다.)
알아서 스크롤 생기면서 사이즈 정해짐
단축키(맥)

코맨드 + 클릭 -> 해당 변수명 써져있는 거 볼 수 있음
컨트롤 + - -> 전에 커서위치로 (밖으로 나오기)
컨트롤 + 시프트 + - -> 다시 그전꺼 (다시 들어가기)