코드스테이츠(SEB_FE_42)

[JS] React Intro

codeyun2 2022. 11. 25. 16:52

React

: JavaScript 오픈소스 라이브러리

UI에 집중한 라이브러리

3가지 특징으로 프론트엔드 개발을 효율적으로 할 수 있게 해줌

컴포넌트를 먼저 개발(Bottom-up 개발 방식)

 

장점

1. 복잡한 UI를 이전보다 쉽게 구현

2. JS문법을 사용하여 따로 공부할 문법이 적음

3. 많이 사용되기 때문에 참고할 레퍼런스가 많음

4. 컴포넌트 기반이라 재사용 용이

5. React-Native와 문법이 같아서 모바일 개발도 가능

 

특징

1. 선언형

JSX(HTML과 JS가 결합한 문법)을 기반으로 명시적으로 코드를 작성

코드만 보고도 실제 웹 애플리케이션의 모습과 기능을 상상할 수 있음

 

2. Component Based 컴포넌트 기반

컴포넌트

: 하나의 기능 구현을 위해 여러 종류의 코드를 묶어놓은 것(구조와 동작에 대한 코드)

  UI를 구성하는 필수 요소

 

기능별로 분리하기 때문에 의존성이 없어 독립적으로 작동, 재사용 가능, 유지보수가 편함

(에러 발생, 구조 변경 시 해당 컴포넌트만 수정)

=> 효율적

 

3. 범용성

JS 라이브러리이기 때문에 기존에 자바스크립트 프레임워크로 제작된 웹 애플리케이션에

리액트를 추가하여 제작할 수 있음(프레임워크에 종속됨) -> 전부 수정할 필요 없음

React Native로 모바일도 개발 가능

(프레임워크는 정해진 구조대로 코드를 작성해서 다른 것과 같이 사용하기 어려움. angular, vue 등.

라이브러리는 코드들의 집함. 원하는 코드를 꺼내어 사용할 수 있음)

 

 

JSX(JavaScript XML)

: 자바스크립트 확장 문법

UI를 구성할 때 사용, React 엘리먼트를 만들 수 있음(문자열도 HTML도 아님)

 

Babel(JSX -> Babel -> JS -> Browser)

: JSX는 JS를 확장한 문법이지만 브라우저가 바로 실행할 수 없어서

브라우저가 이해할 수 있는 JS 코드로 변환해주어야 함(컴파일)

 

React에서 JSX를 사용하는 이유

: 명시적. HTML과 JS를 하나의 파일에서 동시에 사용해 기능과 구조를 한 눈에 확인

  개발자가 코드뿐만 아니라 구조를 보게 함

 

규칙

① 여러 엘리먼트를 작성하는 경우 최상위에서 Opening tag와 closing tag로 감싸주어야 함(하나의 엘리먼트로 만듦)

- 아무 의미 없는 <div>를 사용하거나 의미 없는 div 사용을 줄이기 위해 <React.Fragment> 사용

② class 속성을 지정하려면 class="이름"이 아닌 className="이름"으로 표기

- class로 표기할 경우 html 클래스 속성이 아닌 JS class로 인식

③ JS 표현식 사용할 때 반드시 {중괄호} 사용. 그렇지 않으면 문자열로 인식

④ 사용자 정의 컴포넌트는 대문자로 시작 function Hello() {} 사용할 때는 <Hello />

- 소문자로 작성하면 일반적인 html 엘리먼트로 인식

⑤ 조건부 렌더링에는 if문이 아닌 삼항 연산자 사용

- 삼항연산자는 표현식(변수에 넣을 수 있음)이고 if는 표현식이 아니기 때문에

- 3번 중괄호 사용할 때도 표현식을 사용할 것

⑥ 여러개의 HTML 엘리먼트를 표시할 때 map()함수 이용

- map은 배열형태를 반환하는데 React가 엘리먼트를 하나씩 나열시켜줌

- map()함수 이용할 때에는 반드시 최상위 엘리먼트에 "key" JSX 속성을 넣어야함

key

- id처럼 변하지 않고, 예상 가능하며 유일한 값.

- 알맞은 키가 없을 때 최후의 수단으로 배열 인덱스 사용 → 업데이트가 제대로 안 일어날 수 있어 비추천

- 랜덤값 주기: 의미 없는 값이라 권장되지 않음. Math.random(): 무작위로 0~1 사이 리턴, uuid, nanoid 라이브러리: 무작위 문자열 리턴 

 

 

리액트 애플리케이션은 트리 구조임

최상위 컴포넌트는 근원(root)의 역할을 하며 자식 컴포넌트를 가질 수 있음

 

각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당

컴포넌트들을 조합하여 복잡한 UI를 구성하거나 애플리케이션을 만들 수 있음

 

create-react-app

React에서 create-react-app이라는 툴 체인을 만들어서 복잡한 개발 세팅을 미리 해줌

React SPA(single page application)를 쉽고 빠르게 개발할 수 있도록 만들어짐

=> 한 줄의 명령만으로 자신만의 리액트 프로젝트를 시작할 수 있음(빌드에 신경쓰지 않고 코드 작업에 집중 가능)

위에서부터(좌>우) create-react-app, ESLint, PostCSS, Babel, JEST, Webpack, React

배포용 웹 애플리케이션 제작을 위해서는 리액트 외에도 많은 node.js 패키지들이 필요

- ESLint 문법 오류, 안티 패턴을 찾아 일관된 코드 스타일 유지를 도움

- PostCSS CSS 트랜스파일러

- Babel JSX를 JS로 변환

- JEST 테스트를 도움

- Webpack 다양한 패키지를 묶어줌(Module Bundler)

 

hot reloading 기술 적용

: 저장과 동시에 화면에서 확인 가능

 

설치 방법

// 터미널에서 git, node, npm 버전 확인을 통해 설치되어 있는지 확인
git --version
node --version
npm --version

// 리액트 프로젝트를 구현하고 싶은 디렉토리로 이동
npx create-react-app 프로젝트이름(폴더명)
// npx는 npm을 활용하는 명령어 중 하나

package.json의 scripts의 start값을 가장 자주 사용하게 될 것임(npm run start를 하면 실행하게 될 명령어)

// 터미널에서 리액트 실행 시
npm run start react-scripts

// package.json에 아래와 같이 적어서
"scripts": {
    "start": "react-scripts start",
}
// 터미널에서 start로 실행할 수 있음
npm run start

* 함수 결과값으로 엘리먼트 둘 이상 반환하고 싶을 때 대괄호로 감싸고 ','콤마로 구분 [ <div>hi</div>, <div>hello</div>, ...]

* 화살표함수 우항을 소괄호로 감싸는 것도 리턴으로 인식

 

 

 

 

22.11.25

코스 S2U4