환경

OS : windows 10 64bit
memory : 32GB
storage : M.2 SSD
IDE : vs code
node virsion : 14.13.0
package manager : yarn

ES6의 이해

2015년 발표된 자바스크립트 표준의 6판 버전으로 리액트에서는 기본적으로 ES6의 문법을 사용한다. 매우 많은 변화가 있었는데 몇가지의 특징만 정리해 보자.

객체지향의 개념인 class의 반영
var를 대체하는 let, const의 추가로 scope 및 hoisting 완화
문자열 자료형의 startsWith(), endsWith() 추가
문자열 구간의 변수 직접 기입
화살표 함수의 추가
for...in 보다 간결한 for...of의 추가
배열 내장함수 map, filter, concat, from (자바의 Stream 제공 메서드와 같은 역할을 하는 것으로 보임)

VS code extension setup

Shell launcher 터미널을 단축키로 선택하여 불러올 수 있게 해준다

TabOut '"]} 등 영역이 끝나는 문장 앞에서 탭을 이용해 밖으로 빠져나올 수 있게 해준다

ES7 React/Redux/GraphQL/React-Native snippets리액트 네이티브와 자주 쓰이는 다양한 플러그인의 스니펫을 추가해준다

react practice

bash 터미널에서 CRA를 통해 react-1 프로젝트를 생성한 뒤 해당 프로젝트의 내부로 이동하여 실행한다.

yarn add global create react-app react-1 #생성
cd react-1 #이동
yarn start #실행

JSX

JSX는 리액트에서 다루는 파일 형태로 자바스크립트의 내부에서 HTML 태그를 사용할 수 있다. 이렇게 렌더링된 정적 디렉토리인 public안의 index.html에 빌드된다. JSX는 기본적으로 다음의 규칙을 준수해야 한다.

• 닫는 태그 필수
• 최종적으로 반환되는 태그는 반드시 하나
• 값이나 연산등 자바스크립트의 요소를 다룰 때는 {} 문법 사용
• CSS 요소를 다룰때 사용하는 class는 className으로 대체
• style을 inline으로 입력할때는 json 형식 사용

Component

Component는 리액트가 만드는 페이지의 작은 구성 요소들로 함수형과 class 형이 있다. 공식 문서에서는 함수형 Componenet와 React Hooks를 사용하는 것을 권장하고 있다.

import React from 'react'; //react 기본  package 사용
const Child = (props) => { // 화살표 함수
  	console.log(this.state);
    return ( // 반환은 태그 하나로 감싸서
        <div>
            ...
        </div>
    );
}
export default Child; // 다른 곳에서 사용할 수 있도록 추출

state - props

state는 Component가 가지고 있는 자신의 값으로 생성과 수정이 Component내에서 이루어진다. props는 부모 Component로부터 상속받은 데이터로 자식 Component는 이 값을 사용하기만 할 뿐 수정 할 수 없다.

import React from 'react';
import Child from './Child'; // Child Component 사용

class App extends React.Component {
  constructor(props) {
  	super(props);
    this.state = {
      list: ["hello","react"]
    }
  }
  render() {
    return(
      <div className="App">
        <h1>Child Component</h1>
        <Child list={this.state.list}/>
      </div>
  )};
}

export default App;

위와 같은 App 내에서의 Child 사용에 의해 부모 자식 관계가 성립되며 App의 state는 Child 입장에서의 props가 된다.