이번 포스트에서는 리액트에 기본적인 것을 작성해보도록 하겠다.
1. React 는 무엇인가? ✨
React 는 Facebook에서 개발된 JS(자바스크립트)의 라이브러리, 주로 UI 를 만들기 위해 사용된다. 컴포넌트 기반 아키텍처와 가상 DOM을 활용하여 빠르고 효율적인 웹 애플리케이션 개발을 도와준다.
Component(컴포넌트) 기반
React 는 컴포넌트라는 것을 사용할 수 있는데, 쉽게 말해 하나의 '부품'으로 만들 수 있는 것이다. 이 '부품' 이라는건 필요에 따라 다른 곳에도 끼워맞출 수 있도록 특정 UI 를 독립적으로 나눌 수 있다. 아래 예시를 보도록 하자.
<Header>
<h1>
<a href="/"> 이것은 헤더입니다. </a>
</h1>
</Header>
<nav>
<ul>
<li><a href="/">링크1</a></li>
<li><a href="/">링크2</a></li>
<li><a href="/">링크3</a></li>
</ul>
</nav>
<article>
<h2> 이것은 아티클입니다. </h2>
<p> 꾸브라꼬 치킨 맛있겠다. <p>
</article>위의 코드는 아직까진 간단해 보이지만, 이 코드가 점점 몸을 불려나가 3423482억배 길어지게 된다면 눈이 어지러워질 것이다. 서로 연관된 코드들을 하나의 이름을 붙여 단순하게 묶을 수 있다면 편리할 것이다.
이런 널부러진 옷들을 정리하고 넣을 수 있는 옷장이 되어줄 수 있는게 리액트이다. 아래 코드를 보자.
<Header>
<h1>
<a href="/"> 이것은 헤더입니다. </a>
</h1>
</Header>
// <Header></Header>
<nav>
<ul>
<li><a href="/">링크1</a></li>
<li><a href="/">링크2</a></li>
<li><a href="/">링크3</a></li>
</ul>
</nav>
// <Nav></Nav>
<article>
<h2> 이것은 아티클입니다. </h2>
<p> 꾸브라꼬 치킨 맛있겠다. <p>
</article>
// <Article></Article> 주석으로 처리해놓은 태그가 보이는가?
리액트에선 해당 코드의 내용들을 묶어서 하나의 태그로 간단하게 표현할 수 있다. 16줄의 코드를 3줄로 줄일 수 있다는 것이다. 이것이 리액트의 가장 핵심적인 역할이다. 이렇게 묶어놓은 '부품'은 다른 사람들에게 공유할 수 있고, 반대로 상대가 만든 '부품' 을 내가 사용할 수 있다.
그 밖에도 Virtual DOM (가상 돔), 단방향 데이터 흐름의 아키텍처 패턴(Flux), JSX 문법 등의 특징도 있는데 기회가 된다면 다음에 포스트 남기도록 하겠다.
2. React 설치하기 ✨
처음하는 사람이라면 다음과 같은 준비물이 필요하다.
-
Visual Studio Code
(설치경로: https://code.visualstudio.com/ ) -
Node.js
(설치경로: https://nodejs.org/en) -
Homebrew ( mac 유저는 있으면 좋음 )
(설치경로: https://brew.sh/ko/)
(사용방법 참고: https://url.kr/avhs7f)
1. Node.js 설치하기
터미널 또는 iTerm 에 들어가 아래 명령어 적어보기
다운로드 받았을 때 적혀있던 버전과 같다면 설치완료
node -v
npm -v
2. 작업 폴더 만들기 + vs code에서 열기
눈에 잘 보이면 좋으니 바탕화면에 만드는 게 좋다
바탕화면에 폴더를 생성 후, vs code를 켜고 폴더를 연다
3. React 생성하기
터미널 (단축키 ctrl+J) 을 열고 아래 코드 입력
방법은 두가지인데 작성자는 두번째 방법을 자주 사용했다
npx create-react-app .
npx create-react-app 프로젝트명그리고 기다리기...조금 오래 걸린다
4. 설치 완료
설치가 정상적으로 완료되면 터미널에 'Success! Created 어쩌고 저쩌고...' 메세지가 뜨면 정상적으로 설치가 된 것이다
아래 명령어를 입력해 리액트를 실행시켜 보자
npm start 명령어를 적었다면 localhost:3000 이라는 주소와 함께 아래와 같은 화면이 뜰 것이다
