✍🏻 [Code Camp_TIL] 2일차: React의 장점, React Component, React-hooks

React를 배워야 하는 이유

1일차에 React에서 html, css를 사용하면 코드를 간결하게 짤 수 있고, tag 이름을 명확히 알 수 있어서 코드의 유지보수성이 좋아진다는 것을 배웠다.


프론트엔드에서 많이 사용하는 도구로는 React, Vue, Angular가 있다. Vue와 Angular도 React처럼 부품 조립 방식임에도 불구하고, 왜 하필 리액트를 써야 할까?

많은 사용자 수

바로 React 유저가 Vue나 Angular 유저보다 많기 때문이다. 유저가 많다는 건 배울 자료도 많고, 질문과 검색이 쉽다는 걸 의미한다.

웹, 앱, pc앱을 다 만들 수 있다?!

React를 사용하면 웹, 앱, pc앱을 모두 만들 수 있다. React로 앱을 만들기 위해 사용하는 React-native는 React와 굉장히 유사하기 때문에 React를 공부하면 금방 배울 수 있다. 또한 Electron을 활용하면 React로 만든 웹사이트를 데스크탑 프로그램에서 실행되도록 할 수 있다.

게다가 React-native는 크로스 플랫폼이어서 안드로이드 전용 앱과, IOS 전용 앱을 한번에 만들 수 있다.

React Component

React에서는 부품을 하나 만들어놓고 필요할 때마다 가져와서 쓰는 방식을 많이 사용한다. 여기서 부품을 리액트 컴포넌트라고 한다. UI 또는 기능을 부품화해서 재사용이 가능하게 하기 때문에 주로 큰 서비스를 만들 때, 시간을 효율적으로 사용해서 코딩을 하기 위해 사용한다.

리액트 컴포넌트는 복사&붙여넣기와는 차이가 있다. 하나를 만들어놓고 필요할 때마다 가져가서 쓰는 것은 같지만, 리액트 컴포넌트는 import로 컴포넌트를 가져다 쓸 수 있다. 컴포넌트의 일부를 하나만 바꾸기만 하면, 나머지의 컴포넌트도 자동으로 바뀌기 때문에 일일이 수정할 필요가 없다는 점에서 복사&붙여넣기와는 차이가 있다.

컴포넌트의 기준은 개발자가 설정하기 나름이다. 페이지 하나도 그 자체로 큰 컴포넌트가 될 수 있다(페이지 컴포넌트라 함).

컴포넌트 만드는 방법 2가지: 클래스형 컴포넌트 vs 함수형 컴포넌트

클래스형 컴포넌트

클래스형 컴포넌트는 복잡해서 잘 쓰지 않는 추세다. 하지만 클래스형 컴포넌트를 만들어놓고 유지하거나, 클래스형으로 만들었지만 부분부분 함수형으로 변경하는 경우도 있기 때문에 클래스형 컴포넌트를 알아놓아야 한다.

import { Component } from "react";

class New extends Component {
  render() {
    return <div>이것은 클래스형 컴포넌트</div>
  }
}

export default New

함수형 컴포넌트

use로 시작하는 react-hook을 페이스북에서 제공하기 시작하면서 함수를 컴포넌트 형태로 사용할 수 있게 되었다. 함수를 만들고 앞에 export default를 붙여서 내보내는 방식이다. 클래스형 컴포넌트와 비교하면 훨씬 간단하다. 따라서 최근 많은 기업에서 함수형 컴포넌트를 주로 사용하고 있다.

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

export default New

함수형 컴포넌트는 화살표 함수로도 표현이 가능하다.

const New = () => <div>이것은 함수형 컴포넌트</div>

export default New

React-hooks

함수형 컴포넌트가 클래스형 컴포넌트보다 간단하긴 하지만, 클래스형 컴포넌트의 모든 기능을 흉내내지는 못한다. 그래서 React에서 함수형 컴포넌트도 클래스형 컴포넌트처럼 기능하도록 하기 위해 Hooks(훅)이라는 도구를 만들었다.

Hooks는 변수를 만들어주는 기능을 하며, useState, useEffect 처럼 앞에 ‘use’를 붙여서 사용한다.

state, setState, useState

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

React 컴포넌트에서는 let, const, var가 아닌 리액트 전용 변수 state를 사용한다. let, const와 state를 사용하여 count라는 변수를 만드는 방법을 각각 비교해보자.

let, const

let count = 0;      const count = 0;

state

const[count, setCount] = useState(0)

useState 소괄호 안에는 변수에 들어가는 초기값을 설정해준다!

다음으로는 let, const와 state의 변수를 바꾸는 방법을 비교해보자.

const는 재할당이 불가하므로 let만 재할당을 해준다.

let count = 0; count = 5; 

state는 setCount에 5를 넣어주면, count에 5가 들어가게 된다.

Const [count, setCount] = useState(0)
setCount(5)

state, setState, useState는 언제 쓰일까?

프론트엔드 개발자가 데이터를 전송해주면, 백엔드 개발자는 받은 데이터를 좀 더 디테일하게 검증(보안 등)한다. 데이터를 전송할 때 우리가 입력한 값들은 state에 저장되고, 그 데이터가 전송되는 것이다.

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

---