[React] React Basics

Steve·2021년 4월 29일

웹개발 코스

목록 보기

15/59

React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.

JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.

React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.

create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다.

React

React 는 front-end 개발을 위한 JavaScript 오픈소스 library 이다.

리엑트의 특징:

선언형 (Declarative)
원래의 웹 개발은 한 페이지를 보여주기 위해 HTML, CSS, JS 로 나눈다.
리엑트는 하나의 파일에 명시적으로 작성할 수 있도록 JSX를 활용한 선언형 프로그래밍을 지향한다.
컴포넌트 기반 (Component-Based)
리엑트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중할 수 있고, 유지보수 및 테스트 하기에도 용이하다.
Keyword : 독립성, 재사용성
범용성 (Learn Once, Write Anywhere)
Angular는 framework로, 다른 프레임워크와는 사용할 수 없고, 해당 프레임워크 생태계에 존속된다. 하지만 리엑트는 library 이기 때문에, 기존 프로젝트를 다 고치지 않고도 사용이 가능하다.
Facebook 에서 관리되어 안정적이고, React Native 로 모바일 개발이 가능하다.

JSX

JavaScript XML의 줄임말로, 자바스크립트 확장 문법(Syntax extension to JavaScript)이다.
JSX로 리엑트에서 마크업 형태의 HTML 코드를 작성하여 DOM 에 배치할 수 있다. 즉 JSX 와 CSS 의 조합으로 웹을 만들 수 있다.

Babel

JSX는 Babel이라는 컴파일러를 이용하여 자바스크립트로 컴파일한다. JSX 없이도 React 요소를 만들 수 있지만 코드가 복잡하고 가독성이 떨어진다.
Babel 은 리엑트가 나오기 전에도 있던 자바스크립트 transcomplier 로, ES6 코드를 이전 버전으로 변환시켜준다 (최신 기술을 옛날 브라우저에도 쓸 수 있게 만들어준다). JSX 는 non-standard 이며, JSX 변환은 플러그인이다. 원래 리엑트는 자체적으로 컴파일러를 제공하고 있었으나 Babel 을 활용하는 쪽으로 바꾸었다.

일반 자바스크립트에서는 querySelector, createElement, append 를 활용하여 html 요소를 가져오지만 리엑트는 JSX 를 통해 html을 바로 만들고 사용할 수 있다.

Component

디자인 패턴 중 Component Pattern 이 있다. 컴포넌트는 하나의 기능 단위이다.
기능을 조합하여 전체를 만들어나갈 수 있다.
구조적 분리 (HTML + CSS + JS) vs 기능적 분리 (Component + Component + ...)
리엑트 앱은 root component가 있고, HTML처럼 컴포넌트간에 hierarchy 를 이루기 때문에 컴포넌트들의 관계를 트리 구조로 형상화할 수 있으며, 부모, 자식, 형제 관계가 존재한다.

How to create react app

npx create react app 파일이름 : 새로운 리엑트 프로젝트 시작하기
npm run start = react-scripts start 브라우저에서 페이지 열기

JSX Syntax, React syntax

// 1. 최종적으로 단 하나의 <tag></tag> 안에 모든 내용이 포함되어야 한다.
// 2. css class 사용 시 className 으로 사용 (그냥 cssClass 라고 하면 안되었을까?)
// 3. 사용자 정의 component 는 반드시 대문자로 시작. 
function Component1 () {...}
<Component1 />

// 4. JS 표현식 사용 시에는 {} 안에 사용.
const myelement = <h1>React is {5 + 5} times better with JSX</h1>;
                        
// 5. 두줄 이상의 HTML 작성 시에는 () 안에 넣어준다.
const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);
                        
// 6. conditional rendering 에 ternary operator 사용 가능
<div>
  The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>

// 7. 여러개의 html element 를 표시하고자 할 때 map() 함수를 사용한다.
// map 함수를 사용할 때에는 key 속성을 넣어 주어야 한다. (안넣으면 warning 뜸)

function BlogPost(){
  const content = posts.map((post)=>{
    <div key={post.id}> // KEY attribute 지정
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  })
  return(
    <div>
      {content}
    </div>
  )
}