먼저 우리가 프로그래밍을 할때 선택하는 도구(언어)의 고려사항을 소개 하겠다.
1. 도구 선택시 고려사항(언어)
<얼마나 많은 사람들이 사용하는가??>
이유1) 배울 자료 많음
이유2) 질문, 검색이 쉬워짐
이유3) 취업, 이직 쉬움
그중에 React를 많이 쓰는 이유는 ??
컴포넌트와 같은 레고 처럼 조립하며 쉽게 사용할 수 있는 장점을 가지고 있고, 리엑트는 Reat.js 로 웹을 만들수 있고, 여기서 조금더 공부하면 React-Native
(크로스 플랫폼)와 같은 모바일 앱을 구현 할 수있다. 그리고 React + Electron을 이용하여 pc에서 작동하는 pc 앱을 만들수 있다.
React 컴포넌트란?
컴포넌트란 UI 또는 기능을 부품화해서 재사용 가능하게 하는 것이다.
아래 그림과 같이, 동일한 UI를 재활용하고, 안에 데이터와 이미지만 바꿔줄 수 있다.
컴포넌트는 복사/붙여넣기와는 다르며 데이터는 각 컴퓨넌트에 맞게 변경하여 사용이 가능하다.
클래스 형 컴포넌트 vs 함수형 컴포넌트
React에서 컴포넌트 작성 방법은 2가지가 있다.
하나는 클래스형, 또 다른 하나는 함수형이 존재한다.
아래의 그림을 통해 알아보자.
요즘 추세로는 함수형을 많이 쓰며, 그이유는 리엑트에서 Hooks라는 함수형을 클래스형과 동일한 기능을 사용 가능하도록 만들어줌으로써 코드는 더 짧아졌고, 더 편리해지면서 함수형 컴포넌트 구조로 넘어오게 되었다
클래스 형 컴포넌트를 반드시 알아야하는 이유
최근에는 많은 기업이 함수형 컴포넌트를 주로 사용하지만, 우리가 클래스형 컴포넌트를 알아야되는 이유는 다음에 있다.
이유1) 내가 취업한 회사가 클래스형 사용을 할 수 있다.
이유2) 클래스형을 함수형으로 바꾸는 프로젝트가 있을 수 있다.
이유3) 내가 검색한 코드가 클래스형인 경우
React-Hooks
함수형 컴포넌트가 클래스형 컴포넌트보다 훨씬 간단하다.
하지만 함수형 컴포넌트 자체로만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼수 없다. 그러므로 React에서는 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 Hooks(훅)이라는 것을 만들었다.
대표적인 Hooks의 예는
=>use로 시작하는 애들
(useState, useEffect, .. useRef)
이런 훅스라는 것들이 있음으로 기존에 클래스 컴포넌트에서만 가능했던것들이 함수에서도 가능하도록 바뀌었다. 그러면서 클래스 컴포먼트는 점점 없어지고 리엑트의 공식문서에서도 함수형 컴포넌트로 넘어오라고 권장하고 있는 추세이다.
state 친구들(state, setState,useState)
state란 리액트 컴포넌트에서 데이터를 담기 위한 상자이다. 우리는 자바스크립트에서 데이터를 담기 위한 상자로 변수를 배웠으며 state는 컴포넌트에서 사용하는 전용 변수이다.
state: 컴포넌트에서 사용하는 변수(state)
setState: 컴포넌트에서 사용하는 변수(state)를 바꿔주는 기능
useState: 컴포넌트에서 사용하는 변수(state)를 만들어주는 기능
** 회원 가입 시 state 사용 방법 과정
회원 가입을 할 때 임시로 저장해두는 곳을 state를 이용하여 활용할 수 있다.
위의 그림에서 작성자, 비밀번호, 제목, 내용의 인풋창에 데이터를 입력하게 되면 state에 담기게 된다.
위의 각 인풋창을 스테이트에 저장하면 wirterState, passwordState, titleState, contentState,라고 부르며, 이 저장된 state들은 아래 등록 버튼을 눌리게 되면 벡엔드 개발자 분들이 만들어 놓은 함수(게시글 등록 함수) API에 전달되이 된다. 그리고 이 전달된 state들은 다시 DB(기능이 많은 엑셀)로 저장이 되며, 나중에 게시글 상세 페이지에 들어가게 되면 DB에 저장 되었던 값들이 꺼내져 화면에 보여줄 수 있게 되는것이다.
Hooks- useState
1. useState로 State변수 만들고, 바꾸기
// 자바스크립트에서 변수 만들기
변수만드는기능 변수명 = 담을내용 ==> let classmate = "철수"
// 리액트 컴포넌트에서 변수 만들기
const [변수명] = 변수만드는기능(담을내용) ==> const [classmate] = useState("철수")// 자바스크립트에서 변수 바꾸기
let classmate = "철수"
classmate = "영희" // classmate 가 영희로 바뀝니다.
// 리액트 컴포넌트에서 변수 바꾸기
const [변수명, 변수바꾸는기능] = 변수만드는기능(담을내용)
const [classmate, setClassmate] = useState("철수")
setClassmate("영희") // classmate 가 영희로 바뀝니다.2. 리액트에서 let을 안쓰고 state를 변수로 사용하는 이유
리액트 컴포넌트는 앞쪽에 화면에 보여지는 부분과 뒷쪽에 데이터를 관리하는 부분으로 나눌 수 있다.
만약, 단순히 자바스크립트 변수 let(또는 상수 const) 를 사용해서 좋아요를 화면에 그렸다면, 좋아요가 증가해서 17로 변경되었을 때, 뒷쪽의 데이터 부분만 변경되고, 앞쪽 화면에는 반영이 되지 않고,만약 화면에 반영 되길 원한다면, document.getElementById(”count”)innerText 를 이용해서 화면에 반영해야한다.
하지만, 컴포넌트 변수 state를 사용해서 화면에 그리고, setState()를 사용해서 좋아요를 변경하면setState() 안에서 화면을 새롭게 그리라는 명령이 실행되어 변경된 데이터가 화면에 새로 그려 질 수 있다.
// let으로 count 예제 실험해보기(기존 방식)
function New() {
let count = 0 // let으로 자바스크립트 변수 만들기
function 팀() {
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** React state 실습 예제
서버컴퓨터에 전송하기위해 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