글 작성자: 망고좋아
반응형

📖 오늘 배운 내용 - 2021.12.29

  • 리액트란?
  • SPA
  • JS 문법 복습
  • JSX
  • Component
  • Props

 

📝 SPA

페이지 변경이 필요할 때 HTML을 처음부터 불러오는 것이 아닌 변경된 부분만 바꿔준다.

  • 전통적인 페이지는 최초에 서버로부터 html을 전달받고 페이지의 변경이 필요할 때 다시 서버에 요청하여 html을 전달받는다. ⇒ 페이지를 처음부터 다시 불러온다.
  • SPA는 최초에 서버로부터 html을 전달받고 페이지의 변경이 필요할 때 변경이 필요한 부분을 JSON으로 전달받는다. → 페이지에서 변경된 부분만 계산하여 다시 그리게 된다.

 

📝 리액트란?

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

  • React의 컴포넌트(component)라고 하는 요소를 이용하면 복잡한 UI를 독립적인 단위로 쪼개어 구현할 수 있다.
  • 단방향 데이터 흐름을 통해 안정적인 코드를 제공한다. 단방향 데이터 흐름은 데이터는 항상 일정한 장소에 있고, 그 장소에서만 변경이 가능한 것을 의미한다.
  • Hooks를 이용해 컴포넌트의 상태를 쉽게 관리할 수 있다.

 

📕 Component

  • React에서 서비스를 개발하는 데 있어 독립적인 단위로 쪼개어 구현한다.
  • React 컴포넌트의 재사용은 개발 시간을 크게 절약한다.

 

📕 Virtual DOM(가상돔)

  • 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다.
  • Virtual DOM은 사용자 경험을 향상하고 개발자의 작업 속도를 높인다.

 

📕 JSX

  • JSX는 자바스크립트 XML의 약자이며 여기서 XML은 HTML의 한계를 극복하기 위해 만들어진 마크업 언어이다.
  • JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경을 제공한다. HTML과 유사하다.
  • React는 JSX 문법을 이용해 마크업 언어와 코드의 로직을 따로 분리하지 않고 두 가지를 포함한 컴포넌트라는 것을 사용한다.
  • JSX를 사용하는 것은 선택사항이다. 그러나 권장한다!

 

📝 리액트를 배우면 좋은 이유?

📕 생산성 / 재사용성

  • Component와 Hook을 활용하여 작은 단위의, 독립적인 요소로 개발하여 개발자의 생산성과 코드의 재사용성을 높인다.
// HTML/JS
<body>
    <span id="text"></span>

    <script>
        document.getElementById("text").innerText = "hello world";
    </script>
</body>

// React
const App = () => {
  const text = "hello world";
  return <span>{text}</span>;
};
  • HTML/JS는 레이아웃을 구성하는 HTML과 UI 내 데이터를 변경하는 JavaScript 로직이 분리되어 있어 코드 파악에 오랜 시간이 걸릴 수 있다.
  • 반면 React는 JSX를 활용하여 HTML 내에 필요한 데이터를 한 공간에 삽입할 수 있어 개발이 간단해지고 다른 사람이 개발 의도를 파악하기 쉬워진다.

 

📕 풍부한 자료 / 라이브러리

  • 전 세계적으로 가장 활발하게 커뮤니티 활동을 하고 있다. → 방대한 자료와 편리한 오픈소스 라이브러리 등이 공유된다.

 

📕 다양한 사용처

  • 웹뿐만 아니라 한 번 배운 React 지식을 React-Native에 적용하여 안드로이드 애플리케이션 및 iOS 애플리케이션 등을 개발할 수 있다.

 

📕 React와 자바스크립트의 차이점

  • React는 앱 작성 방식을 정의하는 라이브러리이다.
  • 이는 데이터가 앱에 사용되는 방식과 그 데이터가 변화하는 결과에 따른 UI 변경 방법에 대해 명확한 규칙을 설정하여 수행한다.
  • 반면 자바스크립트는 규칙을 설정하지 않는 스크립트 언어라고 할 수 있다. ⇒ 자유로울 수 있지만, 코드를 작성하다가 길을 잃어버리기 쉽다.
  • React는 사용자의 입력을 기반으로 자신의 상태를 관리하고 업데이트하는 제어 컴포넌트를 이용해 사용자 입력 시 자바스크립트 객체의 텍스트 값을 설정한다.
    • const [itemInput, setItemInput] = useState("");

 

📝 JS 문법 복습

📕 단축 속성명

// 기존 방식
const username = "김";
const age = 21;
const school = "고등학교";

// 기존 방식
const person1 = { 
    username: username,
    age: age,
    school: school 
};

// 단축 속성명
const person1 = { 
    username, 
    age, 
    school 
};
  • Shorthand property names(단축 속성명)을 이용해 새로운 객체 선언을 간편하게 할 수 있다.
  • 새로 선언하는 object에 key값과 동일한 변수명을 가진 변수를 할당할 경우 value 값을 생략해서 적을 수 있다.
  • key값과 변수명이 다르면 기존 방식대로 작성해야 된다.

 

📕 전개 연산자

  • 두 객체를 합성할 때 겹치는 key가 있을 경우 나중에 오는 값이 들어간다.
  • 즉, 배열의 대괄호([]), 객체의 중괄호({})를 없애준다고 생각해보자!
  • 함수 선언 시 Spread Syntax는 마지막 인수에 한해 사용할 수 있다.

 

📕 옵셔널 체이닝

// 객체
const a = {
    b: {
        c: 1
    }
}
console.log(a?.b?.c); // 1
console.log(a?.x?.c); // undefined
console.log(a?.x.c); // Error

// 배열
const a = [{x:1,y:2}, {x:3,y:4}];

console.log(a?.[1]?.x); // 3
console.log(a?.[2]?.x); // undefined
  • Optional chaining 연산자는 객체나 변수에 연결된 다른 속성 참조할 때 유효한 속성인지 검사하지 않고 값을 읽을 수 있도록 해준다.
  • 만약 유효한 속성이 아닐 경우 에러를 발생시키지 않고 undefined를 반환해준다.
  • 배열의 경우 array?.[index] 와 같이 사용할 수 있다.

 

📝 Create-react-app

  • React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 ‘보일러 플레이트(Boilerplate)’
  • 수많은 React용 보일러 플레이트가 있지만 Facebook에서 직접 만들어서 관리하는 Create React App이 가장 많이 쓰인다.
  • 프로젝트 생성에 필요한 다양한 기능을 Command로 제공한다.
  • Create React App은 기본적으로 Client-side Rendering만 지원한다.

 

📕 장점

  1. 개발자가 온전히 React App 개발에 집중할 수 있도록 해준다.
    • 상대적으로 덜 중요한 코드는 노출되지 않음
    • 강력한 Command 지원
  2. (대부분의) 모든 브라우저에서 해석될 수 있도록 transcompile 지원
    • Babel
    • 배포 시 코드 번들링
    • Webpack

 

📕 React 프로젝트 생성해보기

npx create-react-app <디렉토리명>
cd <디렉토리명>
npm start
  • npx : npm 패키지를 1회성으로 내려받아 실행할 때 사용하는 명령어
  • cd : <디렉토리명>으로 이동
  • npm start : 현재 디렉토리의 프로젝트를 실행

 

📕 디렉토리 구조 살펴보기

  • ./node_modules/ : npm을 이용해 설치한 패키지들 모음
  • ./public/ : 정적인 파일들을 모아 놓는 곳
  • ./src/ : 리액트 개발을 위한 파일들을 모아 놓는 곳
  • App.css : 컴포넌트의 스타일을 설정한다.
  • App.js : 컴포넌트 코드가 들어있다.
  • App.test.js : 컴포넌트 테스트를 위한 파일
  • index.css : 메인 페이지의 스타일을 설정
  • index.js : 주로 코드를 작성할 메인 페이지
  • serviceWorker.js : 브라우저에서 실행되는 스크립트 파일
  • setupTexst.js : 컴포넌트 테스트 설정을 위한 파일
  • ./. gitignore : Git을 이용할 경우 불필요한 파일을 무시할 수 있도록 하는 설정 파일
  • ./package.json : 프로젝트에 관한 정보와 사용하는 패키지들을 명세하는 파일
  • ./README.md : 내 프로젝트에 관한 설명을 작성하는 파일

 

📝 라이브러리 설치와 불러오기

📕 라이브러리 설치

npm install # paskage.json 파일 내에 정의된 패키지 모두 설치
npm install <패키지명> # npm 서버로부터 패키지 내려 받기

npm install <패키지명>@<version> # 특정 버전의 패키지 내려 받기
npm install <Git 레포지토리 주소> # npm이 아닌 git 레포지토리로부터 패키지 내려받기

 

📕 설치한 라이브러리를 프로젝트 내에서 불러오기

import "패키지명" // CSS나 import하는 것 만으로 역할을 하는 라이브러리인 경우 패키지명을 바로 import 한다.
import sth from "패키지명" // 기본적으로 패키지를 불러와 활용할 때에는 할당할 이름을 작성한다.
import {a, b} from "패키지명" // 패키지 내의 일부 메소드나 변수만 가져올때는 구조분해를 하여 가져오는 것이 효율적이다.
import * as sth from "패키지명" // 패키지에 default로 export되는 객체가 존재하지 않을 경우 * as 이름 으로 불러올 수 있다.

 

📕 CSS 불러오기

import "./App.css"
  • css는 확장자까지 꼭 작성해줘야 된다.

 

📝 JSX

 

[React] 리액트 JSX

🎯 JSX 📝 JSX const App = () => { return ( Hi 하이~ 비와이~ ); }; JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장이다. HTML과 비슷하게 생겼으나 JavaScript이고 HTML과 다..

lakelouise.tistory.com

 

📝 Component, 컴포넌트

 

[React] 리액트 컴포넌트와 Props

🎯 리액트에서 Component란? 📝 Component란 컴포넌트는 UI의 조각이다. 컴포넌트를 활용하여 엘리먼트를 독립적으로 만들어줄 수 있다. = 엘리먼트의 재사용성을 높여준다. 즉, 독립적, 재사용 가능

lakelouise.tistory.com

 

💡 오늘 깨달은 것

  • React는 대규모 프로젝트에서 데이터를 효율적으로 관리하는데 유용하지만 실행 속도 면에서는 다소 불리하다.
  • React에서는 컴포넌트 내의 데이터가 바뀌면 자동으로 감지하여 UI를 업데이트한다.
  • 엘리먼트는 한 번 생성되면 수정이 불가능한 불변 객체이기 때문에 값을 변경하고 싶으면 새로운 엘리먼트를 만들어 업데이트해야 한다.
반응형

'프로그래밍 > Today I Learned' 카테고리의 다른 글

[TIL] 엘리스 SW 엔지니어 트랙 Day 050  (0) 2022.01.03
[TIL] 엘리스 SW 엔지니어 트랙 Day 049  (0) 2021.12.31
[TIL] 엘리스 SW 엔지니어 트랙 Day 047  (0) 2021.12.28
[TIL] 엘리스 SW 엔지니어 트랙 Day 046  (0) 2021.12.27
[TIL] 엘리스 SW 엔지니어 트랙 Day 045  (0) 2021.12.25

티스토리툴바