[React] React 기초와 프로젝트 시작방법

React란?

프론트앤드 개발을 위한 자바스크립트 오픈소스 라이브러리

• 오픈소스
  소스가 공개되어 있어서 누구나 자유롭게 사용, 복제, 배포, 수정이 가능한 소프트웨어
• 라이브러리
  다른 프로그램에서 호출하여 사용할 수 있도록 제공하는 일종의 함수 집합

 

 

React의 특징

1. 선언형(Dexlarative)

무엇(What)에 집중하여 프로그래밍 하는 것으로 선언형 프로그래밍은 JSX 표현식으로 작성함
*삼항연산자, map, 태그(JSX만 가능, JS는 불가) 등

• 선언형의 반대는 명령형 프로그래밍으로 어떻게(How)에 집중하여 프로그래밍
  반복문, 조건문 등은 명령형에 해당
  *변수에 할당되지 않는 것들이 명령형, 변수에 할당되는 것들은 선언형
• JSX를 활용한 선언형 프로그래밍 : 한 페이지를 보여주기 위해 html, css, JS로 나누어 작성하지 않고, 하나의 파일에 명시적으로 작성할 수 있음
  *JSX : html와 JS가 결합한 문법으로 직관적임
• App.js 이 한 개의 JavaScript 파일 안에서 HTML과 JavaScript로 나누어졌던 두 가지 일을 한 번에 처리

 

2. 컴포넌트 기반(Component-Based)

컴포넌트라고 불리는 작고 독립적으로 나뉘어진 코드 조각들을 사용해 UI를 구성

• 서로 독립적이고 재사용성이 좋으며 유지보수성, 기능에 집중한 구현(개발)이 가능
• 하나의 기능 구현을 위해 여러 종류의 코드를 하나로 묶어둔 것
• 컴포넌트간 의존성이 적어 유지 보수, 유닛 테스트 등에 유리
• Bottom-up 개발 방식 : 컴포넌트를 먼저 개발

 

3. 범용성(Learn once & Write Anywhere)

어디에든 유연하게 적용이 가능하고 리액트 네이티브로 앱 또한 개발 가능

• 리액트는 오픈소스 라이브러리라서 자바스크립트를 사용하는 환경이라면 어디서든 쓸 수 있음
• 기존의 다른 자바스크립트 프레임 워크로 제작된 웹 어플리케이션에 리액트를 추가하여 유연하게 개발 가능

 

 

JSX(JavaScript XML)

1. JSX의 개념

JSX → Babel → JavaScript → Browser

function App(){
  return <h1>Hello, world</h1>
}
//JSX 문법 사용 : 직관적, 가독성 높음

function App(){
  return React.createElement("h1", null, "Hello, world")
}
//JSX 문법을 사용하지 않은 코드

• 주로 리액트 컴포넌트를 작성할때 사용
• createElement 등의 메소드를 사용하지 않고도 React 엘리먼트를 만들 수 있음
• 자바스크립트를 확장한 문법이지만 브라우저가 바로 실행할 수 있는 자바스크립트 코드가 아님
  *Babel을 이용해 브라우저가 이해할 수 있도록 자바스크립트로 변환
• Babel : JSX를 자바스크립트로 컴파일하여 브라우저가 읽고 렌더링할 수 있도록 함
• JSX 사용 시 자바스크립트만으로 마크업 형태의 코드를 작성하여 DOM에 배치 가능
  *html처럼 생겼으나 html이 아님

 

2. JSX의 규칙

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함
   • 엘리먼트가 두 개 이상일 때 감싸는 태그가 필요
     *<></>로 감싸줘도 OK
2. React에서 CSS class 속성을 지정하려면 className으로 표기
   • class로 작성시 리액트는 html 속성이 아닌 자바스크립트 속성으로 인식
   • 시멘텍 엘리먼트(header, footer, nav, section, article, aside)는 html 엘리먼트이므로 소문자로 표기
3. 자바스크립트 표현식 사용시 중괄호({}) 이용
   • 중괄호 미사용시 일반 텍스트로 인식
   • 중괄호({})를 묶으면 function () {}와 같으며, 소괄호(())로 묶으면 () 안의 값이 return
4. 사용자 정의 컴포넌트 : 대문자로 시작(PascalCase)
   • 소문자로 시작시 일반적인 html 엘리먼트로 인식
5. 조건부 렌더링 : if문이 아닌 삼항연산자 사용
6. 여러개의 HTML 엘리먼트 표시 : map() 함수 사용
   • map 함수 사용시 "key" JSX 속성을 넣어야함

 

3. 컴포넌트(Component)

<Sidebar /> //Sidebar 컴포넌트
<Footer /> //Footer 컴포넌트

• 하나의 기능 구현을 위한 여러 종류의 코드 묶음으로 UI를 구성하는 필수 요소
• 컴포넌트는 각자 독립적인 기능을 가지며 UI의 한 부분을 담당
• 컴포넌트를 여러개 만들어 조합하면 웹 어플리케이션을 만들 수 있음
• 컴포넌트들의 관계 : 최상위 컴포넌트를 root(근원)로 하며 이는 다른 자식 컴포넌트를 가짐
  *이 계층적 구조(hierarchy)를 트리 구조로 형상화 가능
• 수정 : 기존 컴포넌트의 위치만 수정하면 됨
  *기존 HTML, CSS, JavaScript : HTML의 구조를 바꾸고, 기존 화면 위치에 맞추어 작성되어있던 스타일 속성을 수정할 위치에 맞게 수정후 자바스크립트가 DOM을 조작할 수 있도록 수정

 

4. map을 이용한 반복

function Tistory() {
  const content = posts.map((post) =>
    <div key = {post.id}>
      <h1>{post.title}</h1>
      <h2>{post.content}</h2>
    </div>
  );

  return <div className="Tistory">{content}</div>
}

• map() : 배열의 각 요소를 특정 논리(함수)에 의해 다른 요소로 지정(map)
• key 속성 : map 메소드 내부에 있는 첫 엘리먼트에 넣어줌
• key 속성값 : id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문에 가능하면 id를 할당
  *고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결

 

5. 삼항연산자를 활용한 조건부렌더링

조건 ? true : false

username === "Despair" ? (
  <div>절망</div>
) : (
  <div>희망</div>
)

• 괄호는 선택사항으로 기능에 영향을 주진 않지만 결과가 어떻게 처리되는지 직관적으로 볼 수 있음

 

 

React 프로젝트 시작하기

1. Create React App

• 터미널 입력 한번으로 React 프로젝트 시작 가능
• Create React App : 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인

 

2. Create React App 실행하기

npx create-react-app 프로젝트명

• 명령어 : npx(npm을 활용한 명령어)
• 프로젝트명 예시 : react-random-proverb
• 터미널에 "Happy hacking!" 메시지가 뜨면 성공적으로 생성 완료