React 라이브러리란?
서로 연관된 코드들을 그룹화하고 이름을 붙여서 단순한 태그로 만들고 복잡한 코드를 숨기고 내가 만든 태그를 사용할 수 있도록 도와주는 것이 React 라이브러리 입니다.
React 라이브러리의 핵심은 사용자 정의 태그를 기술이라는 점입니다.
여기서 잠깐
라이브러리와 프레임워크는 무엇이고 둘은 어떤 차이점이 있을까?
라이브러리(Library) : 프로그래밍에 사용할 수 있게 미리 만들어져 있는 함수나 변수들의 묶음입니다.
프레임워크(Framework) : 작업(work)의 구조(frame)가 정해져 있는 라이브러리 입니다.
라이브러리와 프레임워크는 모두 쉽게 말해서 누군가가 작성한 코드입니다. 이 둘의 가장 큰 차이점은 작성자가 코드를 컨트롤 하는냐 누군가의 규칙에 따라 코딩을 하느냐 입니다. 라이브러리는 내가 필요로 할 때 도서관에서 자료를 찾듯이 마음대로 빌려는 것이 가능하지만 프레임워크는 정해진 프레임 안에서 작업을 해야합니다.
JSX문법이란?
리액트로 UI를 표현할 때 쓰는 문법입니다. 브라우저를 실행하기 전에 바벨를 사용하여 일반 자바스크립트 형태의 코드로 변환합니다.
HTML코드 작성과 유사하여 가독성이 높고 작성하기 쉽습니다.
HTML코드를 사용한 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="root">
<div>
<header>
<h1>hello world shop</h1>
<nav>
<ul>
<li>링크1</li>
<li>링크2</li>
<li>링크3</li>
<li>링크4</li>
<li>링크5</li>
</ul>
</nav>
</header>
<main>
<h2>hello world!</h2>
<p>product list</p>
<ul>
<li>best seller 옷1</li>
<li>best seller 옷2</li>
<li>best seller 옷3</li>
<li>best seller 옷4</li>
<li>best seller 옷5</li>
<li>best seller 옷6</li>
<li>best seller 옷7</li>
<li>best seller 옷8</li>
<li>best seller 옷9</li>
<li>best seller 옷10</li>
</ul>
</main>
<footer>
<h2>hello footer!</h2>
<address>제주시 인다 1길</address>
</footer>
</div>
</div>
</body>
</html>JSX 문법을 사용한 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const header = (
<header>
<h1>hello world shop</h1>
<nav>
<ul>
<li>링크1</li>
<li>링크2</li>
<li>링크3</li>
<li>링크4</li>
<li>링크5</li>
</ul>
</nav>
</header>
);
const main = (
<main>
<h2>hello world!</h2>
<p>product list</p>
<ul>
<li>best seller 옷1</li>
<li>best seller 옷2</li>
<li>best seller 옷3</li>
<li>best seller 옷4</li>
<li>best seller 옷5</li>
<li>best seller 옷6</li>
<li>best seller 옷7</li>
<li>best seller 옷8</li>
<li>best seller 옷9</li>
<li>best seller 옷10</li>
</ul>
</main>
);
const footer = (
<footer>
<h2>hello footer!</h2>
<address>제주시 인다 1길</address>
</footer>
);
const body = (
<div>
{header}
{main}
{footer}
</div>
);
const domContainer = document.getElementById('root');
//ReactDOM.createRoot 함수는 React 18부터 도입된 함수로, React 애플리케이션에서 루트 노드를 만들고, 그 루트 노드를 기반으로 리액트 앱을 렌더링하는 데 사용됩니다.
const root = ReactDOM.createRoot(domContainer);
root.render(body);
</script>
</body>
</html>리액트를 만드는 방법은 크게 두가지로 나뉩니다. 바로 클래스문법을 사용하는 것과 함수를 사용하는 것인데 최근에는 함수를 이용해서 리액트를 사용하는 경우가 많아졌기 때문에 함수형 컴포넌트로 위 HTML코드 내용을 다시 작성해보았습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
<script type="text/babel">
function Header() {
return (
<header>
<h1>hello world</h1>
<nav>
<ul>
<li>링크1</li>
<li>링크2</li>
<li>링크3</li>
<li>링크4</li>
<li>링크5</li>
</ul>
</nav>
</header>)
}
function Main() {
return (
<main>
<h2>hello world!</h2>
<p>product list</p>
<ul>
<li>best seller 옷1</li>
<li>best seller 옷2</li>
<li>best seller 옷3</li>
<li>best seller 옷4</li>
<li>best seller 옷5</li>
<li>best seller 옷6</li>
<li>best seller 옷7</li>
<li>best seller 옷8</li>
<li>best seller 옷9</li>
<li>best seller 옷10</li>
</ul>
</main>
);
}
function Footer() {
return (
<footer>
<h2>hello footer!</h2>
<address>제주시 인다 1길</address>
</footer>
);
}
const body = (
<div>
{Header()}
{Main()}
{Footer()}
<Header />
<Main />
<Footer />
<Header />
<Main />
<Footer />
<Header />
<Main />
<Footer />
</div>
);
const domContainer = document.getElementById('root');
const root = ReactDOM.createRoot(domContainer);
root.render(body);
</script>
</body>
</html>
적극성과 커뮤니케이션 능력이 겸비된 개발자로 성장하자!