[React] 리액트(React)란?

1. React?

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 중 하나로, 페이스북과 인스타그램에서 개발 및 관리하고 있는 오픈소스

(사용자 정의 태그를 만드는 기술)

 

2.  React 특징

• Component: UI를 구성하는 요소로 독립적인 단위로 쪼개어 구현 (사용자 정의 태그)
• Virture DOM: 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념
• JSX(Javascript Syntax Extension): 자바스크립트 내에서 UI 마크업을 편하게 작성하기 위한 환경 제공 (HTML과 유사)

 

3. React 왜 써야 할까?

• 생산성 / 재사용성: 과거 웹페이지는 HTML 페이지 전체를 받아와 클라리언트에게 보여줘야 했는데 컴포넌트단위로 쪼개져 있으면 전체가 리로드 되는 것이 아닌 일부분만 리로드 할 수 있어 생산성, 재사용성이 높아진다.
• 풍부한 자료 / 라이브러리
• 다양한 사용처

 

4. React 프로젝트 생성하기

시작하기 앞서 Create React App을 사용하면 React 프로젝트를 쉽게 생성하도록 도와주어 개발자가 온전히 React APP 개발에 집중할 수 있도록 한다.

npx create-react-app <디렉토리 명> // 설치
npm run start // 실행

 

 

5. JSX

JSX는 자바스크립트 확장 문법으로 자바스크립트 코드 안에 HTML과 유사한 형태의 코드를 작성할 수 있다.

이는 개발자 편의성을 향상시켜주고 문법 오류나 코드량이 감소하게 된다.

하지만 HTML과 비슷하지만 다른 점

• HTML태그 내에 자바스크립트 연산
• class -> className로 camelCase를 지켜서 작성
• 스타일은 object로, 닿는 태그는 필수(input, br 태그도 끝에 닫는 태그 '/' 넣기)
• 닫는 태그 필수
• 최상단에 element는 반드시 하나여야 하기 때문에 <div>또는 <>로 감싸줘야 한다.

const App = () => {
  const name = "amy";

  return (
    <>
      <div className="greeting" style={{ padding: 10, color: "blue" }}>
        {name}님 안녕하세요.
        <br />
        반갑습니다.
      </div>
    </>
  );
}

 

6. Component

React에서 컴포넌트는 UI를 구성하는 재사용 가능한 최소 단위로 화면에 표시되는 각각의 요소를 독립적으로 정의하고 관리할 수 있다.

컴포넌트의 이름은 JSX를 사용하기 때문에 HTML 태그랑 구분짓기 위해 대문자로 시작해야 하며

Class Component와 Function Component로 나뉜다. (현재는 Function Component 주로 사용)

const App = () => {
	return (
    	<div>
            <p>안녕</p>
            <MyComponent>반가워</MyComponent>
        </div>
    )
}

컴포넌트 형태는 위에 App 함수에서 JSX 형식(HTML 태그들을 return)으로 작성되어 있으면 함수 컴포넌트라고 한다.

여기서 제일 기본적으로 만들어진 App컴포넌트는 리액트의 진입점이 되는 최상위 컴포넌트이기 때문에

내가 만약 MyComponent 라는 컴포넌트를 보여주고 싶다면 컴포넌트 파일을 생성해서 App 컴포넌트 내부에 내가 만든 컴포넌트를 렌더링 하게끔 만들어야 한다.