GO WILD, SPEAK LOUD, THINK HARD

엘리스 AI 트랙 06주차 - React 기초 I (1/27) 🔥 본문

개발/엘리스 AI 트랙

엘리스 AI 트랙 06주차 - React 기초 I (1/27) 🔥

Max 2021. 1. 27. 18:30
반응형

✔ 06주차. 웹 프론트엔드 I

<학습 목표>

  1. React(리액트)에 대한 가장 기본적인 개념을 학습합니다.

  2. React를 사용해 다양한 컴포넌트를 만들고 이를 조합해 하나의 App을 구현합니다.

  3. Bootstrap(부트스트랩)의 기본 개념과 여러가지 요소를 활용하여 React 웹 사이트에 적용합니다.

[01 React란?]

1. React란?
  - React(리액트) : 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리. 선언적이고 효율적이며, 유연함. 또한 React의 컴포넌트(component)라고 하는 요소를 이용하면 복잡한 UI를 독립적인 단위로 쪼개어 구현할 수 있음.
  - React를 왜 사용해야 할까 : 동적인 웹페이지를 만들기 위해서. 그리고 사용자와의 소통을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해 사용
  - 장점

    ① Virtual DOM은 사용자 경험을 향상하고 개발자의 작업 속도를 높임. (Virtual DOM : 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념)
    ② React 컴포넌트의 재사용으로 개발 시간을 크게 절약함
    ③ 단방향 데이터 흐름을 통해 안정적인 코드를 제공. (단방향 데이터 흐름 : 데이터는 항상 일정한 장소에 있고, 그 장소에서만 변경이 가능한 것)
    ④ 오픈 소스이며 페이스북 라이브러리이기 때문에 지속해서 개발되고 커뮤니티에 공개됨

    ⑤ Hooks를 이용해 컴포넌트의 상태를 쉽게 관리할 수 있다
    ⑥ 여러 개발 도구를 지원 (크롬에서는 React Developer Tools라는 확장 프로그램을 제공)

  - 파일 구조

  - HTML 로 리액트 구동 : index 파일의 <head>태그 내에 crossorigin 속성을 이용 (CDN) 📌자세히

 

CDN 링크 – React

A JavaScript library for building user interfaces

ko.reactjs.org

→ 그러니까 정리해보면.. DOM을 매번 불러들이는게 아니라 기존꺼는 날려버리고 새로운 DOM을 그려버린다는 의미인듯? 근데 그게 왜 더 효율적인지는 모르겠음.. 굳이 사용해야될 이유가 될까? (물론 이유가 있으니까 많이 쓰는거겠지만..)

 

2. React와 자바스크립트의 차이점 (읽어보면 좋은 글)
  - React는 앱 작성 방식을 정의하는 라이브러리로 데이터가 앱에 사용되는 방식과 그 데이터가 변화하는 결과에 따른 UI 변경 방법에 대해 명확한 규칙을 설정하여 수행함

  - JavaScript는 규칙을 설정하지 않는 스크립트 언어. 라이브러리 없이 작성된 앱은 더 자유로울수는 있지만, 정해진 것이 없기 때문에 코드를 작성하다가 길을 잃어버리기 쉽다.

    ① 사용자 인터페이스를 처음 만드는 방법 : JavaScript 는 일반 HTML 사용, React 는 JSX로 반환되는 컴포넌트를 통해 UI를 정의

    ② 앱에서 기능이 분할되는 방식 : JavaScript 는 앱의 기능 또는 UI의 요소를 분할하는 방법에 대한 특별한 요구사항X. 기본 출력 사항은 만들어 놓고 해당 내용을 업데이트 하는 코드를 따로 작업하는 방식. React 는 기능을 구현하는데 필요한 코드를 하나의 파일로 유지. 앱이 복잡해 지더라도 쉽게 이해할 수 있고 만들어 놓은 컴포넌트를 앱 전체가 공유할 수 있으므로 코드의 재사용이 가능함

    ③ 브라우저에 데이터가 저장되는 방법 : JavaScript 는 사용자 데이터를 일반적으로 DOM(문서 객체 모델)에 저장. (예. input value. id가 다른 입력 텍스트 박스가 여러 개라면 id별로 자바스크립트 코드를 모두 관리해야함). React 는 앱의 상태를 저장하기 위해 DOM에 의존하지 않음

    ④ UI 업데이트 방법 : JavaScript 는 액션을 위해 HTML을 추가하고 DOM 에서 해당 내용을 찾고 리스너 설정하고 백으로 넘겨야함 (번거로움). 

 

[02 JSX 문법 및 렌더링]

1. JSX
  - JSX : 자바스크립트 XML의 약자. 자바스크립트를 확장한 문법이며 HTML을 React에서 쉽게 쓰기 위해 사용. 여러 자식 태그로 구성된 HTML 코드는 반드시 부모 태그 내에 구성되어야 하며, 문장의 끝은 세미콜론(;)을 사용.
  ① 변수 : const, let, var

// var : 재선언O, 재정의O / let : 재선언X 재정의O / const 재선언X 재정의X

var name = "Chris";
var name = "John"

let name = "Chris";
name = "John"

  ② 표현식 : 중괄호 {} 사용

const name = 'Max';
const element = <h1> Hello, {name}! </h1>;

function greeting(){
  return "Hello, Max!";
}

const element = <h1>{greeting()}</h1>;

function formatGreeting(name){
  return "Hello" + ' ' + name;
}

function getGreeting(user) {
  return <h1>Hello, {formatName("Max!")}!</h1>;
}

  ③ 속성 : 큰 따옴표 "" 사용

const element = <a href = "https://kdt.elice.io/explore">엘리스로 이동</a>;

const link = "https://kdt.elice.io/explore";
const element = <a href = {link}>엘리스로 이동</a>;

  ④ 자식 정의 : 자식 태그를 부모 태그로 감싸면 가능

const element = (
  <div>
    <h1>Hello,</h1>
    <h2>elice!</h2>
  </div>
);

  ⑤ 객체 표현 : React.createElement() 메소드 사용. 매개변수로 헤더, 속성, 출력 값

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

2. 엘리먼트 렌더링
  - 엘리먼트 : React 앱의 가장 작은 단위이며 컴포넌트의 구성요소.

  - 렌더링 : 화면에 그리는 것
  - ReactDOM과 렌더링 : React는 실제 DOM을 추상화하여 가상 DOM에 만들어두고, 데이터가 업데이트되면 한 번에 렌더링함

// hello, React!를 출력하는 JSX를 element에 저장
const element = (
    <h1>Hello, React!</h1>
);

// ReactDOM에 element를 렌더링
ReactDOM.render(element, document.getElementById('root'));

  - 엘리먼트 업데이트 : 엘리먼트는 한 번 생성되면 수정이 불가능한 불변 객체이기 때문에 값을 변경하고 싶으면 새로운 엘리먼트를 만들어 업데이트 해야함

// 클릭 횟수 저장 변수
let value = 0

// 클릭 횟수 증가 함수
function click() {
  value++;
}

// 엘리먼트 업데이트 & 렌더링 함수
function tick(){
  const element = (
    <div>
      <h1>버튼을 클릭해보세요</h1>
      <button onClick={click}>Click Me!</button>
      <h2>총 {value}번 클릭했습니다.</h2>
    </div>
  );
  
  ReactDOM.render(element,document.getElementById('root'));
}

// 1초마다 tick()함수 호출
setInterval(tick, 1000);

[03 컴포넌트]

1. 컴포넌트
  - 컴포넌트 : 앱의 기능을 단위별로 캡슐화하는 React의 기본 단위. 독립적이고 재사용 가능한 코드의 조각

    ① 함수형 컴포넌트 :

      - 단순히 데이터를 받고 렌더링을 하면 끝이기 때문에 비상태형 컴포넌트라고도 함.

      - 선언 후 ReactDOM.render() 이용해 렌더링. 매개변수로 함수형 컴포넌트를 <함수 이름 />와 같은 형태로 넘겨주고 요소를 표기할 곳을 함께 넘겨줌

function Introduce() {
  return <h2>Hi, I am elice!</h2>;
}

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

    ② 클래스형 컴포넌트

      - 상태형 컴포넌트라고도 함. HTML을 반환하는 render() 메소드가 구현되어, 복잡한 UI 로직을 구현할 때 클래스형 컴포넌트가 사용

      - 함수형과 비슷하게 렌더링 (구조만 약간 다름). class 선언 시 React.Component의 메소드들을 사용하기 위해 extends를 이용해 React.Component를 상속받도록 구현해야 함

class Introduce extends React.Component {
  render() {
    return <h2>Hi, I am elice!</h2>;
  }
}

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

  - DOM 태그 : 컴포넌트 렌더링 시 넘겨주었던 <함수 혹은 클래스 이름 />은 엘리먼트를 만들어서 렌더링 시 넘겨줄 수 있음

function Introduce(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Introduce name="Elice" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

[04 부록 - 기본 ES6 문법 알아보기]

1. ES6

  - ES6 : 자바스크립트를 표준화하기 위해 만들어진 스크립트 프로그래밍 언어

2. 가변변수 vs 불변변수

  - 재선언 : 똑같은 이름의 변수를 다시 만드는 것 / 재정의: 값이 지정된 변수에 값을 바꾸려는 행위
  - let : 가변변수. 재선언 가능 & 재정의 불가능

  - const : 불변변수. 재선언 & 재정의 불가능

선언 방식

재정의

재선언

var

가능

가능

let

가능

불가능

const

불가능

불가능

3. 화살표 함수
  - 화살표 함수 : ES6에 추가된 표현식으로 화살표 기호 =>를 사용하여 함수를 선언

// 기존 Javscript 방식
var x = function(x, y) {
   return x * y;
}

// ES6 의 화살표함수
const x = (x, y) => x * y;

4. 클래스
  - 클래스 : ES6는 클래스를 정의하여 사용할 수 있음

// class 정의 방법
class ClassName {
  constructor() { ... }
}

// 클래스 정의
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

// 클래스 객체 생성
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

5. forEach() 함수
  - forEach() : 반복문의 순번과 배열의 크기를 따로 변수에 저장하는 과정을 생략할 수 있음. 

var fruits = ["apple", "orange", "cherry"];

// 기존 Javascript 방식
for (i = 0; i < 3; i++) {
    document.write(i);
    document.write(":" + fruits[i] + "<br>");
}

// ES6 방식
function myFunction(item, index) {
  document.write(index + " : " + item + "<br>"); 
}

fruits.forEach(myFunction);

6. map() 함수
  - map() : 각 배열 요소를 정의된 함수를 통해 변환한 결괏값들로 새 배열을 반환 (= 배열을 가공하여 새 배열을 만드는 함수)

var persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];

function getFullName(item) {
  var fullname = item.firstname + " " +item.lastname;
  return fullname;
}

document.write(persons.map(getFullName));

7. reduce() 함수
  - reduce() : 배열의 각 요소에 대해 주어진 함수를 실행한 후, 하나의 결과값을 반환 (배열 자체를 변형)

var numbers = [175, 50, 25];

document.write(numbers.reduce(myFunc));  // 100

function myFunc(total, num) {
  return total - num;
}

※ 수업 자료의 출처는 K-Digital Training x 엘리스 인공지능 서비스 개발 기획 1기 (elice.io/)입니다.

반응형
저작자표시

'개발 > 엘리스 AI 트랙' 카테고리의 다른 글

엘리스 AI 트랙 06주차 - Bootstrap 기초 (1/30) 🔥  (0) 2021.01.31
엘리스 AI 트랙 06주차 - React 기초 II (1/29) 🔥  (0) 2021.01.30
엘리스 AI 트랙 05주차 - 프로젝트로 배우는 MongoDB (1/22) 🔥  (0) 2021.01.23
엘리스 AI 트랙 05주차 - MongoDB 기초 (1/21) 🔥  (0) 2021.01.22
엘리스 AI 트랙 05주차 - Flask 웹 프로그래밍 (1/19) 🔥  (0) 2021.01.20
'개발/엘리스 AI 트랙' Related Articles more
Comments