FrontEnd/React

[React]React 자습하기 - 1. 프런트앤드흐름과 React의 기본 개념

김평범님 2021. 1. 20. 21:41
반응형

React로 Hello World 출력하기

 

🐣 FrontEnd 개발 언어의 흐름

jQuery의 부흥

2014년 처음 개발자가 되겠다고 마음을 먹었을 때, 처음 접하게 된 라이브러리는 jQuery였다.

웹에서 작동하는 JavaScript 개념이 전혀 없어도 jQuery와 함께라면 웹 화면을 만들 수 있었다.

처음 웹 개발을 시작한 주니어들에게 이해하기 쉬운 언어 규칙, 직관적인 방식으로

웹에 애니메이션 효과 혹은 css효과를 줄 수 있는 매우 유용한 라이브러리였다.

 

jQuery의 부흥과 더불어 트위터에서 jQuery를 이용한 프런트 앤드 프레임워크인 Bootstrap이 등장하게 되면서, 

javascript를 전혀 모르던 나도 부트스트랩과 jQuery를 이용하여

그럴듯한 웹페이지를 만들 수 있었다.

 

프레임워크 3 대장 등장

업계에 들어오고 2년 동안 나에겐 너무 편한 jQuery를 난 여전히 사용하고 있었지만,

새로운 개발자 세계에서는 새로운 언어들이 등장하기 시작했다.

현재는 Angular, React, Vue.js 총 3개가 대한민국에서

개발자들이 주로 사용하는 프런트 앤드 프레임워크로 자리 잡게 되었다.

 

프런트 앤드 개발자 사이에선  몇 년 전부터  끊임없이 어떠한 프레임워크가 좋은지에 대한 논쟁이 진행되었고,

2021년이 된 지금 필자의 개인적인 생각으로는 대한민국 내에서는 React가 승자🥇가 되었다.

 

state of Javascript Survey 2020

물론 현재 떠오르고 있는 Svelte가 이후 어떠한 영향을 줄지는 아직 미지수다.

2021년 Svelte에 기대를 걸어 Svelte를 주력으로 공부해볼까도 생각했지만,

이미 React가 한국 프런트 앤드에 많은 영향을 미치고 있다고 판단해서

주력 언어인 Vue.js 정도까진 아니더라도 기본적인 React 공부를 시작해보려고 한다.

 

 

📝 React  공부 방법

오늘부터 차근히 공부를 시작할 부분은 React공식 홈페이지에서 제공해주는 자습서를 따라 하는 걸로 결정했다.

나의 컴퓨터에 코드를 직접 작성하여, React의 자습서에서 만드는 틱택토 게임을 만들어 보려고 한다.

(틱택토가 무엇인가 봤더니 그냥  오목 같은 게임이었다.)

ko.reactjs.org/tutorial/tutorial.html

 

자습서: React 시작하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

React란?

리액트는 사용자 인터페이스를 만들 위한 Javascript 라이브러리이며 처음 만든 곳은 페이스북이다.

React는 컴포넌트 기반으로 이루어져 있다. 복잡한 UI를 컴포넌트로 관리하여  돔과 별개로 상태 관리가 가능하다.

또한 vue와 동일하게 데이터가 변경될 때마다 효율적으로 페이지가 갱신되고 랜더링 된다.

이러한 기능으로 좀 더 역동 적인 페이지를 만드는 것이 가능할 것으로 보인다.

가장 큰 장점은 리액트를 배울 경우 추후 React Native를 이용하면 모바일 웹도 개발이 가능하니 일석 이조다.

 

 

React 프로젝트 생성하기

먼저, React 프로젝트 코드를 작성하기 위해서는 최신 버전의 Node.js 가 필요하다.

Node.js가 없을 경우, 아래 링크를 통해서 Node.js를 먼저 설치하도록 하자.

들어갈 경우, 안정성이 보장된 LTS 버전을 다운로드한 뒤 설치하면 된다.

nodejs.org/en/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

노드 설치 후  cmd 창에  node -v  명령어를 입력 시 현재 설치된 node 버전이 보인다면, 

설치가 완료된 것이다. 

node version 확인하기

 

 

자 이제, Create React App 명령어를 이용해 React 개발 환경을 만들어 주도록 한다.

해당 명령어로 만든 React환경은 react가 정상적으로 동작할 수 있는 환경을 자동적으로 구축해준다. 

npx create-react-app my-app

해당 명령어 입력 시 자동적으로 무언가가 깔리면서, 프로젝트 환경이 구성된다.

 

 

한참 뒤, 성공했다는 메시지가 뜨면,

해당 명령어를 입력 한 폴더 하위에 my-app이라는 폴더가 생성된 것을 확인할 수 있다.

 

 

설치 완료가 된 내용 중 npm start를 이용하면, 리액트 프로젝트를 돌려볼 수 있다.

localhost:3000으로 웹사이트에 접속해보면, 기본적으로 세팅된 화면이 뜨는 걸 확인할 수 있다.

npm run start후, localhost:3000 접속 화면

하지만, 이제 우린 자습서의 내용을 추가해서 넣을 예정이니,

기존 my-app에 src/폴더에서 index.css와 index.js만 남기고 모두 삭제해주고, 

먼저 맛보기로 Hello, world를 띄우는 화면을 만들어 보도록 하겠다.

 

Hello World

index.js 페이지에 아래 코드를 복사해서 넣어보자.

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

/*hello world 출력하기*/
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

 

import 기능을 통해 react와 reactDOM을 이용한다고 선언했다.

reactDOM 패키지를 주입할 경우, DOM에서 이용할 수 있는 특화된 메서들을 호출해서 사용할 수 있고,

그 안에 들어갈 엘리먼트들을 reactDOM에서 관리한다.

 

그중 render라는 메서드를 이용할 경우, react에서 만든 element를 cotainer에 랜더링 하는 게 가능하다.

   

reactdom.render()  사용법

ReactDOM.render(element, container [, callback])

 위의 예시 코드는 우리는 reactDOM.render의 엘리먼트에 <h1> 태그 안 Hello, world를

HTML 파일에 root라는 id를 가지는 DOM노드를 찾아 해당 엘리먼트를 추가하라고 코드를 만든 거다.

 

ReactDOM에서 id가 Root인 DOM을 찾아 hello, world!를 넣어줬다.

 

 

기본 html 파일 구조는 /public 폴더 밑 index.html에 작성되어있다.

 

Hello, World! 를 컴포넌트로 바꿔보자.

React의 가장 중요한 개념 중 하나는 컴포넌트를 주로 사용한다는 것이다.

즉 우리는 우리가 원하는 기능을 하나의 컴포넌트로 만든 뒤, 조합해서 사용하는 것이 가능한 게 

React의 컴포넌트 기능이다. 

 

지금부터 우린 앞서 만든 hello, World를 컴포넌트로 만들어서 화면에 보여주는 걸 해보도록 하겠다.

재사용이라는 개념은 처음 웹을 해본 사람들에게는 잘 모르겠지만, 

이 재사용을 잘할 수 있는 코드를 만들어 놓아야 나중에 업무가 매우 줄어든다는 사실을 알 수 있다.

 

컴포넌트는 함수형과 클래스 형태가 있는데, 지금은  클래스를 이용하여 컴포넌트를 만들도록 하겠다.

 

아래의 코드를 복사해서 index.js에 다시 넣어보자.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, world!</h1>;
    }
}
ReactDOM.render(
    <HelloWorld/>,
    document.getElementById('root')
);

 

화면 상에서는 아까와 동일한 형태로 Hello, world! 가 보일 것이다.

하지만  이번에 작성한 코드는 Helloworld라는 클래스를 만들어서 해당 클래스를 호출하는 방식이다.

이럴 경우 어떠한 화면에서 hello world가 필요하다면, 해당 컴포넌트를 호출해서 

사용하기만 하면 된다.

지금의 예제는 너무 활용도가 낮은 예제라 느낄 수는 없지만, 추후 좀 더 의미 있는 예제를 만들어봐야겠다.

 


💁‍♀️ 해당 포스팅은 스터디를 하며, 작성된 포스팅으로 정확하지 않은 내용이 포함되어있을 수 있습니다.

부족한 점이 있다면, 댓글로 알려주시면 바로 수정하도록 하겠습니다.

 

반응형