리액트를 사용하는 이유

자바스크립트/리액트

리액트를 사용하는 이유

길용쓰 2023. 1. 6. 04:22

리액트는 자바스크립트를 사용하는 프론트엔드 '라이브러리'이다

프레임워크가 아닌 라이브러인만큼, 새로운 무언가를 배운다기보단 자바스크립트를 복습하는 느낌이었고

그냥 자바스크립트로도 될텐데 왜 리액트를 써야하지? 라는 의문이 들었다.

그렇기에, 일단은 왜 리액트를 써야 하는지에 대해 정리해두는게 좋을 것 같아 이 글을 준비했다'

1)데이터 바인딩이 쉬움

데이터 바인딩: 화면에 출력되는 데이터와 메모리의 데이터를 일치시키는 과정

= 서버에서 가져온 데이터를 사용자에게 보여주는 것

let newData = "새로운 데이터"

document.getElementById.innerHTML = newData; //자바 스크립트

<h1> { newData } </h1>;  //리액트

기존의 javascript에선와 getElementById로 HTML의 내부 값을 변경시켰다면

리액트에선 그냥 HTML 내부의 변수를 { }로 감싸면 된다

=> 위와 같이 HTML에 JS 객체를 내장한 컴포넌트를 JSX라고 함

하지만 실제로 사용해보면 변수 값을 변화시켜도 출력 값이 변하지 않는 것을 볼 수 있는데,

import React, { useState } from 'react';

const [char, func1] = useState('사과');
const [arr, func2] = useState(['사과','바나나']);
//arr='사과바나나', arr[0]='사과', arr[1]='바나나]

<span onClick={ ()=>{func1(char + ' 할인')} }> 버튼 </span>

변수가 아닌 state를 사용해야 값이 변경될시 자동으로 재렌더링된다.

그렇기에 빠르고 부드러운 느낌을 주어 뛰어난 UX를 제공 가능하며,

많은 상호작용을 요구하는 동적인 웹, web app을 구현하는데 탁월하다.

useState로 state를 생성하면 input 값을 저장중인 state와 이를 수정 가능한 함수 1개를 return하며,

state는 해당 함수로만 수정될 때 자동으로 재렌더링 된다.

*그렇기에 다른 방법으로 수정되지 않도록 let이 아닌 const로 선언한다

function 내용수정(){
  var newArray = [...arr];
  newArray[0] = '키위';
  func2( newArray );
}

state의 값을 일부만 수정할 때엔 기존의 값을 hard copy하여 배열 변수를 만들고

이의 내용을 수정해 state 변경 함수에 input으로 넣는 방식이 편하다.

[arr] = hard copy // ... = split

2)컴포넌트

function Component(){
  return(
    <div className="component">
      <h1>내용</h1>
    </div>
  );
}


<Component /> //이걸 HTML 파트에서 변수처럼 사용

html 코드 블럭을 함수나 클래스로 만들어 변수처럼 사용 가능하다.

위와같이 코드 블럭을 만들어 조립하듯이 개발하면 코드 재사용에 용이하다.

function App() {
  return (
    <div>
      <Header />
      <Main name="갓대희" color="blue"/>
      <Footer />
    </div>
  );
}

function Main(props) {
    return (
        <div>
            <main>
                <h1 style={{color: props.color}}>안녕하세요. {props.name} 입니다.</h1>
            </main>
        </div>
    );
}

상위 component의 state와 같은 값은 프로퍼티(props)를 통해 전달된다.

하위 component에선 이를 수정할 수 없으며, 그렇기에 리액트는 단반향 데이터 흐름을 갖는다.

(리스너로 수정이 가능하긴 하다. 이를 state 끌어 올리기라고 한다)

3) Virtual Dom을 통한 재조정 (Reconcilation)