ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [React] 리액트는 무엇인가_01
      React 2019. 4. 16. 17:57
      반응형

      프론트엔드 라이브러리

      • 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션임

      • 어떤 유저 인터페이스를 동적으로 나타내기 위해서는 수많은 상태들을 관리해야함

      • 예를 들어서 다음과 같은 html 코드가 있다고 가정해보자.

        <div>
   <h1> Counter </h1>
   <h2 id="number"> 0 </h2>
   <button id="increase"> + </button>
</div>

      • 버튼을 눌러서 숫자 0을 바꾸어주려면

        var number = 0;
var elNumber = document.getElementById('number');
var btnIncrease = document.getElementById('increase');

        btnIncrease.onclick = function() {
  number++;
  elNumber.innerText = number;
}

      • 프로젝트의 규모가 커지고 다양한 유저 인터페이스와 인터렉션을 관리해야 한다면 번거롭고 힘든 일임

      • 기능 개발과 사용자 인터페이스를 구현하는 것에 집중할 수 있도록 많은 라이브러리와 프레임워크가 개발되었음

      Angular, Ember, Backbone, Vue, React ...

      • Angular
        • 다양한 기능들이 이미 많이 내장되어 있음
        • http client, Router 등
        • 타입스크립트 사용이 기본임
      • React
        • 컴포넌트라는 개념에 집중되어 있는 라이브러리. 프레임워크가 아님
        • 컴포넌트는 데이터를 넣으면 우리가 지정한 인터페이스를 조립해서 보여줌
        • 페이스북 개발자들이 라이브러리의 성능을 개선하기 위해 수많은 연구
        • 서드파티 라이브러리들을 활용. 리덕스. 리액트 라우터 등
        • 생태계가 넓고 뜨거움
      • Vue
        • 초보자가 입문하기에 좋음
        • HTML을 템플릿처럼 사용할 수 있음
        • 웹팩같은 모듈 번들러가 없어도 CDN으로 불러와서 사용
        • React에서 좋은 것들, Angular에서 좋은 것들을 합친듯한 느낌
      • 각각의 프론트엔드 라이브러리들이 추구하는 목표나 방향이 다름

      Webpack 과 Babel

      • Webpack은 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러 개의 파일로 결과물을 만들어냄 (bundle your script)
      • 웹 프로젝트를 만들 때 전체적으로 파일들을 관리해주는 도구
      • Babel : 자바스크립트 변환 도구 (Babel is a JavaScript compiler)
      • ES6 : 모던 자바스크립트. 일부 새로운 자바스크립트 문법은 구형 브라우저에서 지원이 안됨. 바벨을 사용
      • Put in next-gen JavaScript
       const object = {
      a: 1,
    b: 2
  };

  const { a, b } = object;
      • Get browser-compatible JavaScript out
      var object = {
    a: 1,
    b: 2
};

var a = object.a,
    b = object.b;

      JSX

      • HTML 이랑 비슷하지만, 지켜야할 규칙이 몇 가지 있다.

      1. 꼭 닫혀야하는 태그

        • 태그는 꼭 닫혀있어야 함

        • 태그를 열었으면,

          를 통하여 태그를 통하여 태그를 꼳 닫아주어야함

        • html 에서 input 이나 br 태그를 작성할 때 태그를 안닫을 때도 있는데, 똑같이 리액트에서 하면 오류를 겪게 된다.

      import React, { Component } from 'react';

class App extends Component {
    render() {
        <div>
            <input type="text">
        </div>
     );
    }
}

export default App;

      1. 감싸져 있는 엘리먼트

        • 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야함.

      2. JSX 안에 자바스크립트 값 사용하기

        • JSX 내부에서 자바스크립트 값을 사용할 땐 이렇게 할 수 있음
      import React, { Component } from 'react';

class App extends Component {
  render() {
      const name = 'react';
      return (
          <div>
            hello {name}!  
          </div>
      );
  }
}

      const

        function foo() {
      var a = 'hello';
    if (true) {
          var a = 'bye';
          console.log(a);  **// bye**
    }
    console.log(a);  **// bye**
  }
      function foo() {
      let a = 'hello';
      if (true) {
          let a = 'bye';
          console.log(a);  // bye
      }
    console.log(a);  // hello
  }

      var vs const vs let

      • var: ES6 에서 더이상은 쓰이지 않음. 더 이상은 never,,,
      • const: 한번 선언 후 고정적인 값
      • let : 유동적인 값

      JXS 에서 CSS 스타일과 클래스를 사용하는 방법

      • 기존 html 과 css 코드

        <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin </title>
</head>
<body>
  <div style="background: blue; color: white; padding: 1rem>BLUE</div>
  <div class="green">GREEN</div>
</body>
</html>

      • css

      •  

        .green {
  background : green;
  padding: 1rem;
  color: white;
}

      • 리액트에서는 스타일을 객체로 넣어줌

      • 카멜케이스로 입력 (새로운 단어가 시작될 때마다 대문자로 입력)

      import React, { Component } from 'react';

class App extends Component {
  render() {
    const style = {
      backgroundColor: 'black',
      padding: '16px',
      color: 'white',
      fontSize: '36px'
    }
    return (
      <div style={style}>
        안녕하세요!
      </div>
    );
  }
}

export default App;

      리액트에서 주석 넣기

      • 멀티라인의 주석을 { } 으로 감싸준다.

      Props 와 State

      • Props와 State는 데이터를 다룰 때 사용되는 개념
      • Props : 부모 컴포넌트가 자식 컴포넌트한테 값을 전달할 때 사용

      함수형 컴포넌트

      • 함수형 컴포넌트와 클래스형 컴포넌트의 차이점은 state와 life cycle의 유무이다.
      • 함수형 컴포넌트는 초기 마운트 속도가 미세히자민 좀 더 빠르고, 불필요한 기능이 없기 때문에 메모리 자원을 조금 덜 사용함
      • 단순히 어떤 값을 받아와서 보여주는 용도일 때 주로 함수형 컴포넌트로 작성함
      • 함수형 컴포넌트는 컴포넌트를 좀 더 간단하게 만들 수 있음

      State를 사용하는 방법

      • props 값은 부모가 자식한테 주는 값이다. 자식 입장에서 props 값은 읽기 전용이다.
      • state는 컴포넌트 자기 자신이 들고 있다.
      • state는 내부에서 변경할 수 있다.
      • 변경할 때는 언제나 setState라는 함수를 사용한다.
      • state는 컴포넌트 내부에 있고, 내부에서 바뀔 수 있다. 값이 바뀔 때마다 컴포넌트는 리렌더링이 된다.
      • setState를 쓰지 않고 값을 직접 바꾸게되면 컴포넌트가 리렌더링 되지 않아서 원하는 결과를 얻을 수 없다.
      • props는 읽기 전용이고, state는 변경할 수 있다.

      State를 이용한 Counter 만들기

      반응형
      저작자표시 비영리

      'React' 카테고리의 다른 글

      [React] 배열 데이터 렌더링 및 관리  (0) 2019.05.06
      [React] Input 상태 관리  (0) 2019.05.03
      [React] 리액트 작업 환경 설정하기  (0) 2019.05.01
      [React] LifeCycle 소개 및 사용법  (0) 2019.05.01
      [React] 주요 개념 정리  (0) 2019.04.24

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바