React 기초

어제 오늘 다룬 React 기초에 대하여..
어제는 처음 다뤄보는 React에 정신 없이 뚜들겨 맞다가 정리를 못하고 잠들었다.
그래서 오늘 한꺼번에..

React의 3가지 특징

• 선언형
  -코드를 자세히 보지 않아도 코드의 의도를 알 수 있도록 작성 (명시적)
  -JSX를 활용한 선언형 프로그래밍을 지향
• 컴포넌트 기반
  -하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트 기반 개발
  -독립적이고 재사용 가능 -> 기능 자체에 집중하여 개발 가능
• 범용성
  -JavaScript 프로젝트 어디에든 유연하게 적용될 수 있음
  -Facebook에서 관리되어 안정적, 리액트 네이티브로 모바일 개발도 가능

JSX (JavaScript XML)

• React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법
• 이를 이용해 React 엘리먼트를 만듬

• JavaScript가 확장된 문법이지만 브라우저가 바로 실행하지 못함
  -> Babel을 통해 브라우저가 이해할 수 있는 JavaScript 코드로 변환 필요

• JSX 없이도 React 요소를 만들 수 있지만 코드가 복잡해지고 가독성이 떨어짐

JSX 문법

• 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 함
  opening tag와 closing tag로 감싸주어야 함
• CSS class 속성을 지정할 때 className 으로 표기해야 함
• JSX에서 JavaScript를 쓰고자 한다면 중괄호 사용
  중괄호를 쓰지 않으면 일반 텍스트로 인식
• React 엘리먼트가 JSX로 작성되면 대문자로 시작해야함 (사용자 정의 컴포넌트)
  소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식
• 조건부 렌더링은 삼항연산자를 이용
• 여러 개의 HTML 엘리먼트를 표시할 때는 map() 함수를 사용
  map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야함

간단한 예시

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React via npm." },
  { id: 3, title: "Practice", content: "Practice React via npm run start" }
];

export default function Blog() {
  return (
    <div>
      {
        posts.map((post) => (
          <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
          </div>
        ))
      }
    </div>
  );
}

컴포넌트

• 하나의 기능 구현을 위한 여러 종류의 코드 묶음
• 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 갖고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 함
• 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있고 계층적 구조를 이룸 -> 트리 구조로 형상화할 수 있음

Create React App

npx create-react-app appname

React SPA (Single-Page Application)

전통적인 웹사이트의 한계와 단점

• 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가짐 -> 더 많은 상호작용 발생
• 매번 모든 페이지를 불러옴 -> 느린 반응성, 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 됨

SPA

• 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트
• 빠른 반응, 서버 과부하 문제 감소
• 더 나은 유저경험 제공

단점

• JavaScript 파일의 크기가 커서 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어짐
• HTML 파일이 거의 비어있어 검색 엔진 최적화가 좋지 않음
  -> 검색 엔진의 발전으로 해결되어가는 중

컴포넌트가 UI의 필수 요소이며 각자 고유의 기능을 가지고 있지만 어플리케이션 안에서 다뤄지는 데이터를 컴포넌트끼리 보다 유기적으로 주고 받을 수 있도록 설계해야 한다.

React Router

npm install react-router-dom

SPA는 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하는 것은 아니다.
트위터를 예로 들면 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요하다.
또한 각 화면이 각각 주소를 갖는다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다.
React 자체에 내장되어있는 기능은 아니다.

React Router

• router : < BrowserRouter >
• route matchers : < Switch >, < Route >
• route changers : < Link >

import로 라이브러리에서 불러온 뒤에 사용할 수 있다.

<BrowserRouter>
	<Link> </Link>

	<Switch>
		<Router> </Router>
	</Switch>
</BrowserRouter>

• BrowserRouter
  웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다.
• Switch, Route
  경로를 매칭해주는 역할을 하는 컴포넌트이다.
  Switch 컴포넌트는 여러 Router를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 한다. Switch를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
  Route 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다.
  Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동한다.
• Link
  경로를 연결해주는 역할을 하는 컴포넌트이다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해 준다.
  ReactDOM으로 렌더를 시키게 되면 < Link > 컴포넌트는 < a > 태그로 바뀌는 모습을 볼 수 있다.
  < a > 태그가 아닌 < Link >를 사용하는 이유
  < a > 태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킨다. 즉, 새로고침 현상이 일어나게 된다. 하지만 < Link > 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어있기 때문에 SPA를 구현할 수 있다.
  exact 속성-> 홈("/")과 같은 경우 다른 경로과 중복되는 시작점이 있을 수 있다. 이럴 때 중복된 컴포넌트를 모두 보여주는 것을 방지한다. 정확히 일치해야만 보여주는 역할

• history

import { useHistory } from "react-router-dom";

const history = useHistory();

onClick={()=> history.goBack()}

뒤로가기와 같은 기능을 구현할 수 있음. goBack() 말고도 다양한 것들이 많음

• NavLink
  기본적으로 Link와 같지만 특정 url이 활성화되었을 때 해당 링크 버튼을 활성화 시켜줌
  active를 자동으로 추가해주고 빼주는 역할

요런 느낌