3-1 : React 기초 (엘리스 AI 트랙)

39944 단어 리액트JavaScriptReact엘리스AI트랙JavaScript

[엘리스 AI 트랙] 3주차 - 1

  • 온라인 강의, 실습 내용 정리본
  • 10/6 수요일

React 기초

1. 들어가며

  • 전통적 페이지 vs SPA(single page application) 의 클라이언트-서버 간 통신

    전통적 페이지

    : 최초 접속 요청 → 서버로부터 HTML 전달 받음 → 페이지 변경 필요할 때 데이터 전달하며(Form Post) 서버에 요청 → HTML 전달 받음

    ⇒ 페이지 reload!

    ————————————————————————————————————
    SPA

    : 최초 접속 요청 → 서버로부터 HTML 전달 받음 → 페이지 변경 필요할 때 데이터 전달하며(AJAX 통신) 서버에 요청 → 변경 필요한 부분 JSON으로 전달 받음

    ⇒ 페이지 reload 없이 변경된 부분만 계산해서 다시 렌더링!



01. React?

  • React
    : 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
  • Component
    : React에서 서비스를 개발하는 데 있어 쪼개어 구현하는 독립적인 단위
  • Virtual DOM
    : 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념 → 가상 돔으로 그려본 후에 다른 부분만 동기화
  • JSX
    : JavaScript 내에서 UI를 작성시 개발자에게 익숙한 환경을 제공하는 HTML과 유사한 템플릿 라이브러리.


02. React의 장점

  • 생산성 / 재사용성
    : Component와 Hook을 활용, 작은 단위의 독립적인 요소로 개발하여 생산성과 재사용성 up

  • 풍부한 자료 / 라이브러리
    : 현재 React는 세계적으로 가장 활발한 커뮤니티 활동 有 → 방대한 자료 & 편리한 오픈소스 라이브러리 등이 공유됨 (redux, fluent UI, Ant Design, mobx 등)

  • 다양한 사용처
    : 웹 앱뿐만 아니라 React-Native에 적용하여 안드로이드 앱 및 iOS 앱 등 개발 가능

  • HTML, JS vs React

    <body>
	<p id="content"></p>
	<script>
		document.getElementById("content").innerText = "Hi Hello";
	</script>
</body>
    • HTML+JS : 레이아웃을 구성하는 HTML과 UI 내 데이터를 변경하는 JavaScript 로직이 분리됨 → 코드 파악에 오랜 시간 소요!

      const App = () => {
  	const content = "Hi Hello";
  	return <p>{content}</p>;
  }

    • React : JSX를 활용하여 HTML 내에 필요한 데이터를 한 공간에 삽입 가능 → 개발이 간단해지고 개발 의도를 파악하기 쉬워짐.



최신 JS 문법

  • var → const & let : const는 선언 후 값을 바꿀 수 없는 상수, let은 선언과 변경이 자유로운 변수. const로 선언된 변수는 같은 스코프 내에서 중복된 이름을 가질 수 없음.
    • 웬만하면 const로 써서 오류 처리 쉽게 하자! 변경 필요한 경우에만 let 쓰기

  • Array 메소드(forEach) : Array.forEach는 배열의 요소를 이용해 순차적으로 함수 실행. Array.forEach에 실행할 콜백 함수는 현재 값, 인덱스, forEach를 호출한 배열을 매개변수로 받음. 함수 내에서 따로 return을 할 필요 없다.
    const arr = [0, 1, 2, 3]
arr.forEach(function(item){ // item은 현재 값!!
	console.log(item);
});

  • Array 메소드(map) : Array.map은 배열의 요소를 이용해 순차적으로 함수 실행하여 각 리턴 값을 모아 새로운 배열 반환. Array.map에 실행할 콜백 함수는 현재 값, 인덱스, map을 호출한 배열을 매개변수로 받음. 함수 내에서 반드시 새로운 값 return 해줘야 함.
    const arr = [0, 1, 2, 3]
const newArr = arr.map(function(item){
	return item + 1;
});

  • Array 메소드(filter) : Array.filter는 배열의 요소를 이용해 순차적 함수 실행하여 조건을 통과하는 요소를 모아
    새로운 배열로 반환. Array.filter에 실행할 콜백 함수는 현재 값, 인덱스, map을 호출한 배열을 매개변수로 받음. 함수 내에서 true를 return할 경우만 새로운 배열에 추가됨.
    const arr = [0, 1, 2, 3]
const newArr = arr.filter(function(item){
	return item > 2;
});

  • Arrow function : Arrow Function(화살표 함수)은 function 키워드를 생략하고 매개변수를 받은 뒤 => 를 써주는 형태의 간단한 함수 표현. 중괄호 내부에 로직을 작성하며 return 값만 존재하는 짧은 함수는 중괄호와 return을 생략하고 바로 return할 값 입력 가능.
    const a = (x, y) => {
	console.log(x, y);
};
a(5, 6);

const b = (x, y) => console.log(x, y);
b(1, 2);

  • 구조 분해 할당 (Destructuring assignment) : Destructuring Assignment(구조 분해 할당)은 객체나 배열을 해체하여 개별 변수에 담을 수 있게하는 표현식.
    // 객체 구조 분해 할당 
const a = {i: 1, j: 2, k: 3};
const {i, j, k} = b;

// 배열 구조 분해 할당
const b = [1, 2, 3];
const [d0, d1, d2] = d;

  • 단축 속성명 (Shorthand property names) : 단축 속성명을 이용해 객체 선언을 간편하게! 새로 선언하는 객체에 key값과 같은 변수명을 가진 변수를 할당할 경우 value 값을 생략해서 적을 수 있다.
    const name = "iceBear";
const age = 5;

var bear1 = {name: name, age: age}; // 기존 코드

const bear2 = {name, age}; // 단축 속성명 사용 코드

  • 전개 구문(Spread Syntax) : 전개 구문은 배열이나 객체를 전개할 때 사용. 배열이나 객체에 ...을 붙여 사용. 함수 호출 및 선언, 배열 선언, 객체 선언 시 다양하게 사용.

    • 객체에서 전개 구문 사용 시, 만약 두 객체를 합성할 때 겹치는 key가 있을 경우 나중에 오는 값이 채택됨.

      // Spread Syntax 배열 예시

const nums = [1, 2, 3, 4, 5];

function getMul(...n){ // n이라는 변수에다가 개수에 상관없이 값을 받아줘! 라는 의미
	let mul = 1;
	n.forEach((item) => {
		mul *= item;
	});
	return mul;
}

getMul(...nums); // nums의 값들을 전개해서 넣어줘! 라는 의미

const newNums = [0, ...nums, 6]; // nums 안의 요소들 전개해서 넣어줘! 의미

/*********************************************************************/

// Spread Syntax 객체 예시

const bear = {name: "iceBear", age: 5, home: "cave"}; // 기존 코드
const bear1 = {...user, skill: ninza, age: 6}; // Spread Syntax 객체 적용 코드. age: 6이 채택됨.

  • 템플릿 리터럴(Template literals) : 템플릿 리터럴은 표현식을 허용하는 문자열 리터럴. 기본적으로 `(back quote)로 감싸 문자열을 표현. 문자열 내에 표현식을 사용하기 위해서는 ${ }로 표기.
    const bear = "iceBear";

const greeting1 = "Hello " + bear; // 기존 코드
const greeting2 = `Hello ${bear}`; // 템플릿 리터럴 사용

  • Optional chaining : Optional chaining 연산자는 객체나 변수에 연결된 다른 속성을 참조할 때 유효한 속성인 지(존재하는지) 검사하지 않고 값을 읽을 수 있도록 해준다. 만약 유효한 속성이 아니면, 에러를 발생시키지 않고 undefined를 반환. 배열의 경우 array?.[index] 와 같이 사용.
    const bear = {
		name: iceBear,
    skillScore: {
        cooking: 10,
				cleaning: 50
    }
}

let result;
if(bear && bear.skillScore && bear.skillScore.cleaning){
	result = bear.skillScore.cleaning;
} // 기존 코드

const res = bear?.skillScore?.cleaning; // Optional chaining 사용

console.log(bear?.skillScore?.cleaning); // 50
console.log(bear?.skillScore?.speaking); // undefined
console.log(bear?.skillScore.speaking); // Error

const arr = [{name:"iceBear", age:2}, {name:"panda", age:4}];

console.log(arr?.[1]?.name); // "panda"
console.log(arr?.[2]?.name); // undefined


리액트 프로젝트 생성

01. Create React App 소개

  • Create React App을 쓰지 않고 아래처럼 직접 script를 추가해서 사용 가능. but 개발에 유용한 기능 다수 포함 & 다수의 개발자에게 익숙한 환경이라 협업에 도움이 되므로 사용 권장.
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script scr="https://unpkg.com/[email protected]"></script>

  • Create React App(CRA)란?
    - React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 보일러플레이트(Boilerplate)
    - 많은 React용 보일러플레이트 중 Facebook에서 제작, 관리하는 Create React App이 가장 많이 쓰임
    - 프로젝트 생성에 필요한 다양한 기능을 Command로 제공함

  • Create React App(CRA)의 장점

    1. 개발자가 온전히 React App 개발에 집중할 수 있도록 함

      • 상대적으로 덜 중요한 코드는 노출되지 않음 → 리액트 코드에 집중 가능
      • 강력한 Command 지원 → 커스터마이징 가능

    2. (대부분의) 모든 브라우저에서 해석될 수 있도록 transcompile 지원

      • Babel → 기본 내장되어 있음.
      • 배포 시 코드 번들링 → 다른 사람들이 코드 알아보기 어렵도록 함.
      • Webpack → 압축 해줌



02. Node.js / NPM 소개

  • Node.js / NPM
    - Create React App으로 React 프로젝트 시작 시 Node.js 개발 환경을 제공함
    - Node.js와 NPM에 대해 알면 이해에 큰 도움

  • Node.js

    • 주로 서버 프로그래밍에 사용되는 JavaScript 기반의 소프트웨어 플랫폼
    • HTTP 통신 관련 라이브러리 내장
    • NPM을 통한 방대한 라이브러리 제공
    • Create React App으로 프로젝트 생성 시 개발 환경 및 테스트 서버로 이용됨

  • NPM

    • Node.js 환경에서 사용하는 각종 패키지들을 관리하는 저장소
    • Node.js 설치 시 함께 설치됨
    • 패키지 관리 뿐만 아니라 서버 실행 및 관리에 필요한 다양하고 편리한 명령어를 제공
    • React와 관련된 모듈들이 NPM에서 배포됨

  • Node.js, NPM 설치 : https://nodejs.org LTS 버전 다운로드 및 설치



03. React 프로젝트 생성해보기

npx create-react-app <디렉토리명>
cd <디렉토리명>
npm start
  • window 이용자 : git bash 사용하기
  • npx : npm 패키지를 1회성으로 내려 받아 실행할 때 사용하는 명령어. 위 예시는 ‘create-react-app’ 이라는 패키지를 한 번 내려 받아 실행한 것.
  • npm start : 현재 디렉토리의 프로젝트를 실행


npm install
npm install <패키지명>
npm start
npm build
(Ctrl + C)

  • npm install : package.json에 정의된(현재 프로젝트에 필요한 모든 모듈) dependency(의존성 패키지)들을 설치.

  • npm install <패키지명> : npm 서버로부터 원하는 패키지 다운로드. (필요한 라이브러리 다운)

  • npm start : 프로젝트 실행(Node.js 서버 이용).

  • npm build : 프로젝트 빌드.

  • (Ctrl + C) : 명령 중지(npm start 후 프로젝트 종료하기).



  • 디렉토리 구조
    - ./node_modules/
    : npm을 이용해 설치한 패키지들 모음
    - ./public/
    : 정적인 파일들을 모아 놓는 곳
    - ./src/
    : 리액트 개발을 위한 파일들을 모아 놓는 곳
    - ./package.json
    : 프로젝트에 관한 정보와 사용하는 패키지들을 명세하는 파일



04. 라이브러리 설치와 불러오기

  • 라이브러리 설치 : npm install을 통해 npm으로부터 패키지 다운로드.
    npm install        //package.json 파일 내에 정의된 패키지 모두 설치
npm install <패키지명>            //npm 서버로부터 패키지 내려받기
npm install <패키지명>@<version>        //특정 버전의 패키지 내려받기
npm install <Git 레포지토리 주소>    // npm이 아닌 Git 레포지토리로부터 패키지 내려받기
  • 설치 후 package.json엔 dependencies(의존성) 라는 키 아래에 설치한 패키지 목록이 나열됨.
    • 참고 : 버전명에는 ^(캐럿. 최신 버전 설치해줘! 라는 표시), <, <=, >, >= 등의 기호를 이용해 범위를 나타낼 수 있다.
      • ^(캐럿) 예시: ^1.0.2 : >=1.0.2 <2.0
        ^1.0 : >=1.0.0 <2.0
        ^1 : >=1.0.0 <2.0

  • 설치한 라이브러리를 프로젝트 내에서 불러오기
    1. import "패키지명" : CSS나 import하는 것 만으로 역할을 하는 라이브러리인 경우 패키지명을 바로 import 함.
    2. import something from "패키지명" : 기본적으로 패키지를 불러와 활용할 때에는 할당할 이름을 작성.
    3. import {a, b} from "패키지명" : 패키지 내의 일부 메소드나 변수만 가져올때는 구조분해 사용하면 효율적.
    4. import * as something from "패키지명" : 패키지에 default로 export되는 객체가 존재하지 않을 경우 * as 이름 으로 불러올 수 있다.
  • CSS 불러오기
    - import "./App.css"; : 별도의 CSS 파일을 작성 후 프로젝트에 적용 시 사용.



JSX와 컴포넌트

01. JSX

1) JSX란?

  • JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장
  • HTML과 비슷하게 생겼으나 JavaScript이며 HTML과 차이 있음.
const App = () => {
	return (
		<div>
			<p>Hi</p>
			<NewComponent>NiceToMeetYou</NewComponent>
			<div>bye</div>
		</div>
	);
}
  • JSX는 Babel에 의해서 Transcompile 됨.

2) JSX 장점

  1. 개발자 편의성 향상
  2. 협업에 용이 / 생산성 향상
  3. 문법 오류와 코드량 감소

3) JSX 특징 / HTML과 차이점

  1. HTML 태그 내에 JavaScript 연산 가능
  2. class → className 사용
  3. 스타일은 object로 표현("" 말고 {} 내부에 표현!)
  4. 닫는 태그 필수 (예.
    )
  5. 최상단 element는 반드시 하나여야 함

  • HTML 태그 내에 JavaScript 연산

    const App = () => {
    const a = 1;
    const b = 2;
    return <div>{a}+{b} = {a+b}</div>
}

  • class → className

    (
    <div className="greeting">Hello World!</div>
)

  • 스타일은 object로 → 아래 예시가 {{}}인 이유는 자바 스크립트 코드임을 알리는 {}와 객체임을 표현하는 {}이기 때문.

    (
    <div style={{color: 'red', fontSize: 10px}}></div>
)
    • 주의 : 위와 같은 Inline style의 Property name은 camelCase로 적는다. (예시: font-size → fontSize, padding-left: paddingLeft)

  • 닫는 태그 필수
    : HTML에서는 닫는 태그를 작성하지 않아도 에러가 발생하지 않고 <input>, <br>같은 일부 태그의 경우 아예 닫는 태그를 생략했지만 JSX에서는 닫는 태그를 필수로 작성해야 함.

  • 최상단 element는 반드시 하나
    : JSX의 원칙상 최상단 Element는 한 개만 작성이 가능 ⇒ <div> 또는 <React.Fragment> 를 이용해 감싼다. 실제 렌더링 시에는 Fragment 안에 있는 내용만 출력됨. <React.Fragment>는 간단히 <> 로 표기.


const App = () => {
    return (
        <div>Ice</div> // 에러 발생함.
        <div>Bear</div>
    )
}
  const App = () => {
      return (
      	<>
          <div>Ice</div> // 에러 발생 X.
          <div>Bear</div>
        </>
      )
  }

02. 컴포넌트

1) 컴포넌트란?

  1. React에서 페이지를 구성하는 최소단위
  2. Component의 이름은 대문자로 시작
  3. Class Component / Function Component 로 나뉨
  4. Controlled Component / Uncontrolled Component → 스테이트 추적 or 필요할 때 받아오기
  5. Component를 만들고(왼쪽) 다른 Component에서 자유롭게 활용(오른쪽)할 수 있다.

2) Class Component와 Function Component

: 초기 React의 Component는 모두 Class Component 였지만 현재는 Function Component가 주로 사용됨.

3) Class Component 특징

  1. Class 개념이 많이 활용되는 Java 개발자에게 친숙한 형태이다.
  2. React의 생명주기를 파악하기 쉽다.

4) Component의 특징

  • Props(Properties. 컴포넌트의 프로퍼티) : 컴포넌트의 Attribute에 해당하는 부분.

  • children : 컴포넌트 안에 작성된 하위 Element.

  • children도 props 중 하나!

    <NewComponent user={{name: "iceBear"}} color="white">
    <div>아이스 베어 소개</div>
</NewComponent>
    const NewComponent = (props) => {
    const {user, color, children} = props

    return (
        <div style={{color}}>
            <p>{user.name}의 하위 element는</p>
            {children}
        </div>
    )
}
    • 상위 Element로부터 전달받은 props를 활용하는 코드. 이 컴포넌트의 자식(children) 요소 역시 props 로부터 값을 받아와 렌더링 함.
    1. 컴포넌트끼리 데이터를 주고받을 땐 : Props
    2. 컴포넌트 내에서 데이터를 관리할 땐 : State
    3. 데이터는 부모 컴포넌트 → 자식 컴포넌트로만 전달
210303_TIL
JPA 영속성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage