[React]리액트 공부 기록 - 리액트를 왜 배워야 할까?

이번에는 리액트를 배워보려고 한다. 프론트엔드를 희망하는 것은 아니지만 개발자를 준비하는 기간동안 다양한 공부를 해보기로 다짐했다.

🤷‍♀️ 리액트를 사용하는 이유

// 회원가입 js의 일부

const userSignup = () => {

    const resultModal = (data) => {
        const resModal = new bootstrap.Modal(document.getElementById("resultModal"), {
            keyboard: false
        })
        resModal.show()
        modalClose()
    }
    const modalClose = () => {
        $(".modalClose").click(function(){
            location.href="/";
        })
    }

    const userId = $("#userId")[0].value;
    const nickname = $("#nickname")[0].value;
    const email = $("#email")[0].value;
    const userPassword = $("#userPassword")[0].value;
    const userDto = {userId, nickname, email, userPassword};
    console.log(userDto);

    $.ajax ({
        type: "POST",
        url: "/account/signup",
        data: JSON.stringify(userDto),
        contentType:"application/json; charset=UTF-8",
        success: function(data, message){
            resultModal(data);
        },
        error: function () {
            alert("정보를 제대로 입력해주세요.");
        }
    });
}
// 아래는 채팅 js의 일부
   if(sessionId == cur_session){
            var str = "<div class='chat-message-right pb-4'>";
            str += "<div class='flex-shrink-1 bg-light rounded py-2 px-3 mr-3 msg'>" + message + "</div>"
            str += "<span class='text-muted small text-nowrap mt-2 spendTime'>" + cur_time + "</span></div>"
            $("#msgArea").append(str);
        }else {
            var str = "<div class='chat-message-left pb-4'>";
            str += "<div>";
            str += "<img src=" + imgUrl + " class='rounded-circle mr-1' alt='Chris Wood' width='40' height='40'>"
            str += "</div>"
            str += "<div class='flex-shrink-1 bg-light rounded py-2 px-3 ml-3 msg'>" + message + "</div>"
            str += "<span class='text-muted small text-nowrap mt-2 spendTime'>" + cur_time + "</span></div>"
            $("#msgArea").append(str);
        }

보통 javascript는 위와 같이 버튼에 대한 이벤트 핸들러를 추가해주고, script를 통해 직접 html 요소를 생성 및 class와 id 등을 추가해줘야 한다. 이걸 직접 할 때마다 "진짜 이렇게까지 해야 한다고?" 라는 생각이 들었다. 물론 처음에는 하나하나 직접 해보는 게 맞다고 생각하고, 그래야 실력도 는다고 생각한다.

그래도 사용하기 편리하고 시간을 단축할 수 있는 방법이 있다면 배워보는 게 좋지!

리액트는 위에서 말한 일반 javascript의 단점을 보완해준다.

// 리액트 코드 예시
import Todo from './components/Todo';

function App(){
	return (
    	<div>
      		<h1>My Todos</h1>
      		<Todo text='Learn React'/>
      	</div>
    );
}
export default App;

리액트는 하나의 html 화면(Single-Page-Application)을 사용한다. 사용자에게 다른 면을 보여주고 싶을 때는 서버에게 다른 html 화면을 요청하는 것이 아니라 기존의 html 화면을 변경해줌으로써 화면전환 한 것처럼 보이도록 하는 것이다.

이렇듯 화면전환 요청 없이 화면을 갈아끼울 수 있기 때문에 보다 매끄러운 화면 변경이 가능하다.

Angular 와 Vue 그리고 React

• Angular는 완벽하게 컴포넌트 기반의 UI 프레임워크다.
• Angular는 React보다 더 많은 내장 기능을 갖고 있기 때문에 소규모 프로젝트보다는 대규모 프로젝트에서 사용하기에 적합하다.
• vue는 React와 Angular를 합쳐놓은 프레임워크라고 생각하면 된다.
• vue는 내장 기능이 Angular보다는 적고, React보다는 많다.