리액트 시작하기.

리액트 공식문서를 토대로 공부를 시작하려고 한다.

리액트 공식문서가 두개가 존재하는데, 한 개는

https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

한국어로 번역된 기존에 있던 리액트 공식문서이고, 

내가 공부할 리액트 공식문서는 베타 버전이며 번역이 되지 않은 

https://beta.reactjs.org/learn 

Quick Start

위와 같은 사이트이다.

 

맥북으로 리액트를 시작하려면 일단 brew로 node를 설치해야 한다. 터미널을 켜고 brew install node를 타이핑하면 node가 설치되는데, 설치가 완료된 후에 원하는 폴더로 cd명령어를 사용하여 이동한 다음, 터미널에서 npx create-react-app을 타이핑한다.

그러면 리액트 기본 프로젝트가 생성이 되는데, vsCode 에디터로 이 프로젝트 내부의 app.js라는 파일을 수정해 가면서 리액트를 공부할 것이다.

 

첫 번째 컴포넌트 만들어보기

React는 UI를 렌더링하기 위한 자바스크립트 라이브러리이다. 버튼, 텍스트, 이미지 같은 작은 단위를 재사용 가능하고 중첩 가능한 컴포넌트로 결합할 수 있다. 블로그에서는 리액트 컴포넌트를 만들고 사용자 정의하며, 조건부로 표시하는 방법을 배울 것이다.

 

리액트 어플리케이션은 컴포넌트라고 하는 분리된 UI조각으로 구축된다. 이는 마크업으로 뿌릴수 있는 JS 함수이다.

 

아래는 세 개의 Profile 컴포넌트를 렌더링하는 갤러리 컴포넌트이다.

function Profile() {
  return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
}

export default function MyApp() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

컴포넌트는 UI를 구축하는 기반이 되기 때문에 리액트의 핵심 개념중 하나라고 한다.

 

<article>
<h1>My First Component</h1>
<ol>
	<li>Components: UI Building Blocks</li>
	<li>Defining a Component</li>
	<li>Using a Component</li>
</ol>
</article>

컴포넌트를 통해 블록들로 UI를 그릴 수도 있다. 웹에서는 위처럼 HTML을 통해서 여러 기본 제공 태그를 사용해서 풍부한 구조의 문서를 만들 수 있는데, 이를 CSS, JS를 결합하여 웹에서 볼 수 있는 모든 사이브다, 아바타, 모달, 드롭다운 등의 모든 UI의 기반이 된다.

리액트도 마크업, CSS, JS를 앱의 재사용 가능한 UI요소인 사용자 정의 컴포넌트로 결합 가능하다. 

 

기존에는 HTML코드를 작성 후에 자바스크립트를 뿌려서 상호작용을 추가햇지만 리액트는 동일한 기술을 사용하면서도 상호작용을 우선시한다. 리액트 컴포넌트는 마크업으로 뿌릴 수 있는 자바스크립트 함수.

아까 만들었던 이미지 컴포넌트 3개를 띄우는 코드를 다시 봐 보자.

function Profile(){}을 사용하면 Profile이라는 자바스크립트 함수를 정의 가능하다. 하지만 리액트 컴포넌트는 일반 자바스크립트 함수이지만 이름이 대문자로 시작해야 한다.  *그렇지 않으면 작동하지 않는다.

 

컴포넌트는 alt 어트리뷰트를 포함한 이미지 태그를 리턴한다. 이는 HTML처럼 작성되었지만 실제로는 자바스크립트이다.

이러한 구문을 JSX라고 하며, 자바스크립트 안에 마크업을 삽입할 수 있다.

 

리턴문이 한줄이 아닐 경우에는 반드시 괄호로 묶어주어야 한다. *괄호가 없으면 맨 첫줄만 작동한다.

 

Profile 컴포넌트를 정의했으므로 다른 컴포넌트 안에 중첩 가능하다. 

 

 

위의 코드들은 HTML로 변환하면 아래와 같다.

위처럼 이미지 태그 내용을 전부 반복해야 하지만 리액트 컴포넌트를 사용하면 컴포넌트 이름만 세번 써주면 된다. 

 

컴포넌트는 중첩해서 정의를 하면 안된다.

위처럼 코드를 작성할 수는 있지만, 매우 느리고 버그를 유발한다.

 

요약

1. 리액트를 사용하면 앱에 재사용 가능한 UI요소인 컴포넌트를 만들 수 있다.

2. 리액트 앱에서 모든 UI는 컴포넌트이다.

3. 리액트 컴포넌트는 일반적인 자바스크립트 함수이다.