React - start

Codestates Immersive 핵심 내용인 React가 시작되었다. 새로운 것을 배운다는 설렘이 있지만, 오히려 두렵다. 이전 내용 중에 잘 모르는 것도 많은데, 계속 진도만 나가는 것은 아닌지...하는 걱정이 앞선다.

React는 Facebook에서 만든 javascript 라이브러리 중에 하나다 => React.com에서 라이브러리라고 설명되어 있지만, 개인적으로 프레임 워크라고 생각된다. 필요한 component를 직접만들고, jsx라는 값을 읽고 화면에 표시해준다.

 - (라이브러리는 음... 일종에 도구라고 할 수 있다. 이미 함수들이 짜여져 있고, 필요한 함수들을 가져다가 사용해서 만든다고 생각하면 된다.)

 - (프레임워크는 음... 프레임이 일종의 뼈대라는 뜻이 있다. 뼈대는 만들어져 있지만, 필요한 코드는 직접 작성을 해야한다.)

 - (라이브러리는 TV를 보고 싶다고 해서 TV를 만들기는 어렵다. 이미 만들어 놓은 TV를 사서 집에 설치만 하면 된다.(L*를 이용할지 sam* 이용할지...프레임워크는 TV라는 가전제품을 어떤 부품을 이용하고 만들지 결정해서 만드는것이 프레임워크)

굳이 React를 사용하지 않고 HTML과 CSS 그리고 JS DOM 이용해서 제어를 할 수 있지만, React 라이브러리를 사용하면 많은 수의 DOM 제어 하기 용이 하며, 이미 Facebook과 instargram에서 사용하며 방대한 DOM 제어를 하는 것이 증명이 되었다.

 

React는 JS 기반 라이브러리 이며, React를 활용하기 위해서는 JS 개념이 필요하다.

 

React에서는 Component 개념을 사용을 하는데 JS에서 class나 함수와 같은 기능을 합니다. Component는 개별적인 여러 조각으로 나누고, 각 조각을 사용할 수 있는 모듈입니다.

 

React는 ES6 문법과 JSX(자바스크립트의 확장 문법)을 사용합니다.

ES6문법은(Destructuring, spread operator, rest parameters, default parameters, template literals, arrow function, for-of loop)를 주로 사용 합니다.

JSX는 JS의 String과 HTML을 합성해서 사용을 합니다.

 ex) const element = <h1>Hello</h1>;

JSX는 React에서 화면을 표시할 때 사용을 합니다. React에서 제공하는 함수 render을 통해서 화면에 표시를 합니다. JSX를 React에서 사용할 때는 4가지 규칙을 가지고 있습니다.

 1. 반드시 하나의 엘리먼트로 감싸야 합니다.(p태그 안에 모든 것을 넣었음)

 2. 자바스크립트 코드를 적용할 땐 {} 안에 작성합니다.(this를 활용한 곳에 {} 사용)

 3. if문 사용X => 삼항 연산자 사용합니다.(textDecoration에 삼항 연산자)

 4. 엘리먼트의 클래스 이름을 적용할 때, className을 사용합니다.(className 활용)

render(){
    const style = {
      textDecoration: this.state.done ? 'line-through' : 'none'
    }
    return (
      <p>
        <li style={style} onClick={this.onListItemClick.bind(this)}>
          {this.props.name} {this.props.price} {`won`} {this.state.count}
        </li>
        <span>{this.state.total}</span>
      </p>
    )
  }

 

Key Concept(중요 개념)

 - Data flow : 단방향 데이터 흐름(코드가 위에서부터 아래 방향으로 순서를 가지고 있습니다.)

 - Props : 상위 component가 하위 component에게 내려주는 데이터, 하위 component는 단순히 사용만 할 수 있음, 내용은 변경할 수 없다.

 - State : component가 갖는 상태, 객체의 형태로 component 내에서 보관하고 관리, state를 사용하기 위해서는 class component로 작성 되어야 함, 값을 변경할 땐 반드시 setState메소드를 사용해야함, state값 변경(setState메소드를 사용하면) => render() 함수가 재 실행

  -Life Cycle : component가 브라우저에 보여질 때, 업데이트될 때, 사라질 때, 각 단계 전 후로 특정 메소드가 호출 된다.

 

공식문서에 중요한 개념 12가지 등 자세히 잘 나와 있다. 각 언어를 지원하기에 보기 편한 것으로 보면 좋을 듯.

공식 API 문서 : https://ko.reactjs.org/

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

#React#Javascript#codestates#keyConcept#JSX#ES6#라이브러리#프레임워크