자바스크립트에 대한 기본기가 부족하던 시절 나는 리액트 교재를 사서 무작정 시작했다가 좌절하고 내려 놓았던 적이 있다.
부족함을 느낀 나는 자바스크립트에 조금 더 치중하여 공부하였고 실무에서 여러 프로젝트를 경험하며 조금씩 눈이 트이고 생각이 트이기 시작했다.
조금 더 깔끔하고 명료한 코드를 만들 수는 없을까? 고민도 많이하고 리팩토링도 시도하며 발버둥을 쳤다. 그러나 단순히 자바스크립트로 작성하는 코드는 내 실력이 부족한 탓도 있었지만 길고 복잡하기만 했다. 자바스크립트만으로도 클린한 코드를 만드는데 부던히 노력해야겠지만 한편으로는 점점 프레임워크에 대한 갈망이 생겨났다.
react.js 입문
오늘은 아주 간단히 리액트 기초를 맛 보았다.
강의를 보며 실습하는 내용이 있지만 오늘은 내가 이해한 내용을 바탕으로 조금 더 원초적으로 설명하고 기록하려 한다.
실습을 시작하기 앞서 React를 사용하기 위한 환경을 만들어 주어야 하는데,
간단히 CDN방식으로 환경을 세팅하도록 하겠다.
react CDN 링크를 body 태그 하단에 첨부하여 react를 사용할 수 있게 연결해주었다.
React CDN link
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>React는 JSX문법으로 작성한다.
*** JSX(Javascript and XML)이란?
Javascript에 XML을 추가한 확장한 문법이다.
그러나 브라우저에서는 이 JSX문법을 바로 이해하지 못한다.
그래서 Babel(compiler)을 사용하여 브라우저가 이해할 수 있는 javascript로 컴파일하는 과정을 거쳐야 한다.
*** Babel이란?
javascript 컴파일러 즉, 브라우저가 이해할 수 있는 javascript 문법으로 번역 해주는 번역기라고 보면 된다.
https://babeljs.io/
Babel CDN link
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>Babel CDN 링크도 react CDN 링크아래에 함께 첨부해준다.
실습을 위한 개발환경 세팅은 끝났으니 실습을 시작해보자!
우선 오늘의 실습 예제 전문이다.
간단한 기본 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react day1</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const title = <h1 class="title">Hello World!</h1>;
const description = <p class="description">Hello React!</p>;
const content = (
<div>
{title}
{description}
</div>
);
ReactDOM.render(content, app);
</script>
</body>
</html>(!) Babel 사용 시에는 script 태그에 반드시 type="text/babel" 타입 속성을 기재 해주어야한다.
우리는 지금까지 html 파일의 body 태그안에 마크업을 해왔을 것이다.
이와 같이
<body>
<h1 class="title">Hello World!</h1>
<p class="description">Hello React!</p>
</body>리액트에서는 컴포넌트 방식을 사용해 브라우저에 렌더링 한다.
JSX문법을 사용해 script 태그 내부에서 컴포넌트를 정의한 후
html 에서는 하나의 최상위 부모 태그만이 존재하고 그 태그에
정의한 컴포넌트들을 렌더링 한다.
*** 컴포넌트란?
앱을 이루는 최소한의 단위,
DOM요소를 기능별로 쪼개어 나눈 단위이다.
쉽게 말해 레고의 블럭이라고 생각하면 된다.
위 실습 예제를 분석해보자.
const title = <h1 class="title">Hello World!</h1>;
const description = <p class="description">Hello React!</p>;먼저 각각의 컴포넌트 태그를 변수로 선언해준다.
const content = (
<div>
{title}
{description}
</div>
);선언한 컴포넌트 태그 변수들을 하나의 컴포넌트로 묶어준다.
(!) 2개 이상의 컴포넌트 태그를 하나의 태그로 묶어주기 위해서는 반드시 부모 태그 div(다른 태그도 상관X)로 감싸 주어야 한다. 그 이유는 다음 코드들을 보면 알 수 있다.
const app = document.querySelector('#app');다음, 앞서 정의한 컴포넌트들이 최종적으로 렌더링 될 태그(부모 컴포넌트)를 불러온다.
개별적으로 선언한 컴포넌트 태그 (title, descript)를 content에 담아 준 이유는 바로 아래 호출할 render함수에 인자로 넣기 위함이다.
ReactDOM.render(content, app);ReactDOM.render() 함수는 리액트에서 정의된 함수이다.
이 함수에 컴포넌트를 인자로 넣어 실행하게 되면 html로 변환되어 브라우저에 렌더링 된다.
ReactDOM.render() 문법
ReactDOM.render(자식 컴포넌트, 부모 컴포넌트);실행하면 결과는?
크롬 개발자 도구의 Element 탭 body 영역을 확인 하면 #app 태그 안에 내가 정의한 태그들이 렌더링 된 것을 확인할 수 있다.
지금으로써는 html에서 마크업 하는 것이 더 편하게 느껴질 수 있다. 하지만 동적인 웹사이트를 만들기 위해 더 나아가다 보면 리액트가 가진 편리함을 몸소 느낄 수 있을 것이며 나 자신도 느껴보려 한다.
