[React] 강의

React.js

• 모바일 앱 : 반응이 빠르고 화면 전환이 원활 -> 앱 사용 편리함
• 웹 사이트 : 링크나 버튼을 누르면 그 요청이 서버로 전송되고 서버로부터 얻어진 html 문서를 불러오는 데 시간이 소요되기 때문에 오래 걸림
  
  
  
  

자바스크립트

개발자들이 브라우저에서 어떤 로직을 수행할 수 있게 해준다. 사용자들이 화면에서 보는 것들을 조작할 수 있음 (DOM) DOM을 자바스크립트로 조작할 수 있음 (새로운 HTML 문서를 불러올 필요가 없음)

리액트

: 클라이언트 사이드의 자바스크립트 라이브러리

자바스크립트 대신 리액트를 사용하는 이유

• 자바스크립트
  모든 단계를 일일히 코드로 작성해야 함 -> 반복작업으로 인한 시간 소요, 간단한 기능을 구현하는데에 자바스크립트 코드가 길어질 수 있음 여러 개의 요소가 존재할 경우 잘못된 동작(혼란스러움)이 발생할 수 있음
• 리액트
  복잡한 사용자 인터페이스 작업을 더 쉽게 구축할 수 있도록 함
  
  
  
  

Single Page Application

리액트로 화면에 보이는 모든 것들과 페이지 전환까지 제어 화면에 보여질 요소를 리액트로 바꿔주는 것(?)

React 대체 가능한 프레임워크 or 라이브러리

React.js

• 컴포넌트 기반의 UI 라이브러리로 컴포넌트 주목, 내장된 다른 기능 X
  -> 라우팅같은 기능 필요하다면 서드파티 라이브러리 추가로 다운 받아야 함
• 컴포넌트가 무엇이고 어떻게 생성하는지, 이 컴포넌트를 렌더링하여 화면에 사용자 인터페이스로 나타내는 방법
  
  

Angular

• 컴포넌트 기반의 UI 프레임워크 (리액트처럼) 타입스크립트 수용(작은 프로젝트에는 과하다 -> 내장 기능이 많음)
• 앵귤러와 리액트는 다른 방식으로 컴포넌트를 구축한다.
  
  

Vue.js

• React와 Angular 사이에 위치 기능 : 앵귤러보다 적고, 리액트보다 많음
• 라우팅 기능 有(커뮤니티 의존성 낮음)지만 앵귤러보다 과하지는 않음
  
  

 

 

 

 

React 프로젝트 만들기

프로젝트 생성, create-react-app

리액트 server 작동

-> 개발 시 에러를 잡을 수 있음

리액트 작동 방식

index.js : 최초의 코드 js 내의 html 코드는 빌드 단계를 통해서만 사용 가능 = jsx 코드(html code in js)

ReactDOM.render(<App />, document.getElementById("root"));

: App.js에서 import render(A, B) : A 요소(App)가 B에 렌더링 되게 만듦

• 리액트는 하나의 html 문서로 여러 페이지를 보여주도록 만든다. 리액트가 그 html 내의 요소를 여러 부분에 렌더링 되도록 제어
• (사용자 지정 요소)은 결국 함수인데, 이 함수는 대개 html 코드(jsx 코드)를 return 한다. 사용자 지정 요소(= 리액트 컴포넌트 = jsx를 return 하는 함수)는 브라우저에 의해 렌더링되지 않지만 이 요소가 반환하는 요소를 렌더링한다고 생각하면 된다.

컴포넌트 작업

• jsx로 작업하면 사용자 지정 요소 외에도 html 표준 요소를 사용할 수 있다.
• HTML class는 자바스크립트 className와 같기 때문에 자바스크립트를 기본으로 하는 리액트에서도 className으로 class 속성을 지정해주어야 한다.

컴포넌트 빌드 및 재사용

• 자바스크립트는 같은 기능을 가진 요소를 만들기 위해 중복된 코드를 작성해주어야 하며, 요소들의 수정을 위해서는 여러 부분을 수정해야 한다.
• 이러한 부분을 보완하기 위해 리액트의 컴포넌트 빌드 및 재사용을 알아야 한다.
• 만들어진 컴포넌트(App 제외) js 파일들은 별도의 디렉토리에 저장 -> src\components
• 컴포넌트(함수)를 export하여 외부에서도 컴포넌트를 사용할 수 있도록 한다.
• 컴포넌트 = 함수는 대문자로 시작 -> 사용자 정의 html 요소로 사용하기 위해 대문자로 시작하도록 한다. -> 리액트 내장 기능 중 표준 html 요소와 구분하는 방법이 첫 문자의 대소문자로 구별하는 것이기 때문
• 컴포넌트를 요소로 바꾸어 사용하는데 이때 요소의 내용이 없는 요소를 closing하기 위해서는 <태그 /> 와 같이 슬래쉬(/)로 닫아주어야 한다.

 

컴포넌트마다 다른 속성 부여 : props

• props는 리액트 개념에서 자바스크립트 객체이다.
• 속성(key)-값(value)으로 이루어진다. (like html element property -> ex. type="text")
• props를 이용해 외부(컴포넌트가 렌더링된 곳 = App)로부터 데이터를 받아 출력할 수 있다.
• 중괄호({})를 이용해 속성값을 출력할 수 있다.

 

이벤트 처리

• 자바스크립트에서는 이벤트리스너 사용 (명령형 접근)
• 리액트는 선언형 접근(목표 결과를 기술)을 하기 때문에 사용 불가
• 결국 컴포넌트(함수) 내부에 존재하는 html 요소들은 모두 컴포넌트들이다.
• ex. onClick 속성을 컴포넌트에 추가하면 리액트에게 클릭 이벤트에 반응하라는 선언

 

여러 컴포넌트 추가

• 컴포넌트는 되도록 적은 태그들을 사용하여 작은 부분으로 쪼개어 js 파일에 생성 (유지 보수 굳, 간단)
• div(closing tag가 있는 요소) 내부에 content가 없을 경우 <div /> 와 같이 단일로 태그를 닫아줄 수 있다.

 

상태에 따른 동작 부여 (동적 페이지 만들기!)

import { useState } from 'react';

• 컴포넌트의 상태에 따라 동작하도록 만들기 위해 react 라이브러리에 내장된 useState 함수 사용
• useState를 사용하면 현재 app에서 사용하고자 하는 상태를 등록할 수 있다.
• 리액트는 현재 활성화된 상태에 따라 다른 결과물을 렌더링할 수 있게 해준다.
• useState(true or false)
• useState는 항상 배열을 리턴하는데 이 배열의 element는 항상 두 개이다.
• 두 개의 원소를 상수에 저장하거나 []에 저장(value 2개를 저장할 수 있는 js의 기능)

 

리액트 훅

• 컴포넌트 함수나 커스텀 훅 안에서 바로 호출되어야 한다.
• 자세한 것은 나중에, 그저 리액트 훅을 컴포넌트 함수 내에서 사용할 수 있다는 것만 알아두기!

 

State 사용하기

ex. Modal 창의 상태 설정

const [ modalIsOpen, setModalIsOpen ] = useState(false);​

• useState의 value는 변경 가능
• 첫 번째 함수 modalIsOpen의 상태가 useState() 안에 들어감
• 두 번째 함수 setModalIsOpen은 state 값을 변경할 수 있게 하는 함수
• setModalIsOpen 함수를 호출할 때마다 리액트가 state가 속한 컴포넌트 함수를 재실행해서 코드를 재검증함, 화면에 렌더링된 내용 업데이트

 

상태를 이용해 컴포넌트(요소) 제어

삼항 연산자

• modalIsOpen의 상태가 true일 때, Modal 컴포넌트를 화면에 출럭

{ modalIsOpen ? <Modal> : null }

함수

• && 연산자를 이용하여 두 변수(?)가 모두 true 값을 가지면 화면에 출력

{ modalIsOpen && <Modal />}

 

Event Props

• 사용자 정의 컴포넌트는 event 정의를 따로 해주어야 한다. (props가 설정되지 않았기 때문에)
• 컴포넌트 함수에 추가하여 정의

1. 내장 html 요소 (ex. button, div, ...)
2. 사용자 정의 컴포넌트 : 컴포넌트 함수에 매개변수로 props를 받아주고, 원하는 property를 정의해준다. 컴포넌트 함수에서 return 하는 요소들은 모두 html 요소이므로 내장된 컴포넌트이며, 이 컴포넌트는 props가 정의되어 있다.
   • props를 통해 받은 컴포넌트(실제 backdrop)의 prop를 컴포넌트 함수에서 onClick 속성으로 전달해준다.
   // Backdrop.js function Backdrop(props) { return <div className="backdrop" onClick={props.onClick} />; } // 사용하는 js 파일 ... <Backdrop onClick={closeModalHandler} />
   • backdrop을 사용하는 js 파일 내의 코드에서 backdrop 컴포넌트가 onClick prop를 호출하면 closeModalHandler가 props.onClick으로 전달된다.
   • 컴포넌트 함수에서 실제 backdrop 컴포넌트를 전달받아 정의한 onClick을 처리한다.

 

Single Page Application

• 한 페이지에 여러 컴포넌트가 존재하는 SPA이지만, 실제 사용자들은 다른 페이지로 이동하는 것처럼 느낌 -> 사용자들이 페이지 로딩을 기다리지 않아도 됨 (빠르다.) => 라우팅 추가

 

 

(2022-06-26)

라우팅

• URL에 기초하여 화면에 보이는 내용을 변경해 줌
• 라우팅을 이용하면 사용자들이 여러 페이지 사이를 이동하는 것이라고 착각하게 만든다.(?)
• 라우팅 : URL 변화를 감지하여 어떤 컴포넌트를 어떤 경로, url에 로딩할지 인지하도록 하여 페이지를 이동시킨다.

 

라우팅 방법

import { BrowserRouter } from 'react-router-dom';

• BrowserRouter도 컴포넌트이기 때문에 (사용자 정의?) html 요소로 사용할 수 있음

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

• 비html 요소로도 감쌀 수 있음

 

라우터 패키지 초기화 (App 컴포넌트에서)

• 라우터가 <App /> 을 인식하고 url을 감지하게 함
• 지원하고자 하는 url을 정의하고 각 url별로 어떤 페이지를 로딩할지 결정