2. React 필수 개념

React 시작하기 전에..

리액트를 시작하기 전 기본적으로 알아야하는 것들이 있습니다. 각종 도구와 문법 그리고 라이프 사이클 등 많은 것들이 있지만 가장 기본적인 것에 대해서 알고 가도록 하겠습니다. 

 

 

도구

1. WEBPACK

웹 팩

여러 개의 자바스크립트 파일이 여러 개가 존재할 때 각각을 따로 로딩할 경우 변수 충돌, 네트워크 비용 등의 문제가 존재합니다. 따라서 이를 하나의 파일로 관리하기 쉽게 해주는 웹 팩을 사용합니다. 다음은 웹 팩의 주요 네가지 개념입니다.

 

Entry - 웹 팩은 모든 파일을 모듈로 관리합니다. 그 파일이 html, css 든 javascript 든 모든 것을 모듈로 로딩하여 사용합니다. 이 때 서로 의존성이 발생합니다. 이 의존성의 시작을 Entry라고 합니다.

 

Output - 이 모듈을 모두 통합하여 나온 산출물입니다.

 

Loader - 웹 팩은 기본적으로 javascript 밖에 모릅니다. 하지만 자바스크립트 파일이 아닌 html, css, image 등 모두 웹 팩에서 관리합니다. 따라서 웹 팩이 비자바스크립트 파일을 알 수 있도록 변경해야하는데 이 때 사용하는 것이 로더입니다. 

 

Plugin - 번들된 output을 처리하는 여러 도구입니다.

 

2. Babel

Babel은 자바스크립트를 ES6 문법에서 ES5 문법으로 변환해주는 로더입니다. 세상에는 많은 브라우저가 존재하지만 모든 브라우저가 ES6 문법을 알지는 못합니다. 따라서 과거 버전의 ES5 문법으로 변경해주어 브라우저가 알 수 있도록 해야하는데요. 이 때 이 문법을 변경해주는 로더가 바로 Babel입니다. 바벨 덕분에 우리는 브라우저와 호환 여부를 생각하지 않고 ES6 문법을 자유롭게 사용할 수 있습니다.

 

 

JSX

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
      </div>
    );
  }
}

export default App;

 

위 코드를 보시면 render() 메소드 아래에 html과 비슷한 형태의 코드를 return 하는 것을 볼 수 있습니다. 사실 html이 아니라 JSX라는 자바스크립트입니다. 리액트는 이 자바스크립트 코드를 반환하여 화면에 렌더링하는 데 사용합니다. 

 

JSX 간단 요약

1. 닫힘 태그는 무조건 존재해야한다. (실제로 닫힘 태그가 필요없는 요소들도 필수적으로 닫힘 태그를 넣어야함)

2. 두 개 이상의 요소들은 무조건 하나의 요소로 감싸져있어야한다.

  2-1 . 만약 불필요한 <div>를 사용하기 싫다면 <fragment> 요소를 사용한다

3. JSX 내부에서 JS 문법을 사용하고 싶을 때 { } 로 감싸준다.

4. var 대신 블록 단위 스코프를 가진 let, const를 사용한다. (이건 JSX라서라기 보단 ES6라서 사용)

5. 조건부로 요소를 반환 할 때 if문 보다는 3항연사자나 &&연산자를 사용

 

그 밖에도 매우 많습니다.

 

 

 

Props

리액트는 단방향 데이터 흐름을 지향합니다. 데이터 방향은 부모로부터 자식에게 데이터를 전달하는 방향입니다. 이 때 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터를 props라고 합니다. 다음과 같이 data를 자식 컴포넌트에게 전달하고 싶으면 props 형태로 전달합니다.

 

(예시)

import React, { Component } from 'react';
import Child from './Child';

class Parents extends Component {

  state = {
   data : 0
  }
  
  render() {
    return (
      <div>
        <Child data={this.state.data} />
      </div>
    );
  }
}

export default Parents;

 

자식 컴포넌트에는 분명 data를 담는 변수가 존재할 것입니다. 하지만 만약 props로 넘어오는 값이 존재하지않는다면 에러가 발생합니다. 따라서 default값을 설정해줄 수 있는데요.

 

 

자식 컴포넌트에 다음과 같이 

static defaultProps = { data : 'default 값'}

코드를 넣어준다면 data에 대한 default 값을 설정할 수 있습니다.

 

 

State

props가 자식 컴포넌트에게 데이터를 전달해준다면 state는 자기자신 컴포넌트의 상태입니다. 따라서 컴포넌트 내부에 위치해야합니다. 위 props 예시에 존재하는 state가 말 그대로 state입니다. 만약 state가 변경될 시 직접 변경한다면 react는 state의 변화여부를 알지 못합니다. 따라서 setState 함수를 통해 state가 변경된다는 것을 react에게 알려주어야합니다.

 

import React, { Component } from 'react';
import Child from './Child';

class Parents extends Component {

  state = {
   data : 0
  }
  
  changeState = () => {			
  	this.setState({		//setState를 통해 data를 1로 변경
    	   data: 1
        })
  }
  
  render() {
    return (
      <div>
        <Child data={this.state.data} />
      </div>
    );
  }
}

export default Parents;

 

 

함수형 컴포넌트

컴포넌트가 라이플 사이클 API와 state를 사용하지 않고 별다른 기능이 없다면, 단순히 View를 렌더링하는 기능만 필요할 경우 함수형 컴포넌트를 사용합니다. 함수형 컴포넌트를 사용할 경우 불필요한 기능이 없어 메모리를 덜 차지하며 마운트 속도가 조금 더 빠르고 간단하게 컴포넌트 생성이 가능합니다. 

const MyName = ({data}) => {		//비구조화 할당

return <div> 모여 주고 싶은 View와 {data}</div>;

}

 

 

 

 

라이프 사이클

리액트에는 크게 세가지 주기가 존재합니다.

 

1. 나타날 때 (Mounting) - 컴포넌트가  브라우저 상에 나타나는 것

2. 업데이트 될 때 (Updating) - Props나 State가 변화되었을 때

3. 사라질 때 (Unmounting) - 브라우저 상에서 사라질 때

 

 

https://velog.io/@bclef25/React-Lifecycle-2rk4p6wg38

 

라이프 사이클 API

 

 

Mount

1. Contructor : 컴포넌트가 mount되기 전 맨 처음 불러와지는 메소드입니다. 주로 state를 초기에 설정하거나 인스턴스의 이벤트 처리를 바인딩 할 때 사용합니다. state를 직접 할당할 수 있는 유일한 곳입니다. contructor에서 setState를 호출해서는 안됩니다.

 

2. getDerivedStateFromprops : mount와 update 될 시 render 메소드를 호출하기 전에 실행됩니다. props와 state를 동기화시키고 싶을 때 주로 사용합니다.

 

static getDerivedStateFromProps(nextProps, prevState) {

   if (prevState.value !== nextProps.value) {

      return {
         value: nextProps.value
      };
   }

   return null;
}

 

static으로 선언으로 선언하며 nextProps는 업데이트 된 props가 prevState는 업데이트되기 전 상태가 입력됩니다. 

 

3. render : render는 유일하게 반드시 구현되어야할 메소드입니다. view를 렌더링 시키기위한 메소드이며 render가 호출될 경우 다음 값들 중 반드시 하나를 반환해야합니다.

 

       react element - 보통 JSX를 반환하여 사용합니다.

배열 또는 Fragment - 여러 개의 요소를 반환할 때 사용합니다.

Portal -  별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링합니다.

문자열과 숫자 - 텍스트 노드로 렌더링됩니다.

boolean과 null - 아무것도 렌더링하지 않습니다.

 

 

4. componentDidMpount : 컴포넌트가 Mount되고난 직후 실행됩니다. 외부 라이브러리나 api를 사용할 때 사용합니다. 또한 Modal이나 tooltip같은 DOM 노드의 크기나 위치를 알아야할 경우 사용하기에 적절한 위치입니다.

 

 

Update

 

5. ShouldComponentUpdate :  컴포넌트가 업데이트 성능을 최적화 시킬 때 사용합니다. 예를 들어 부모 컴포넌트가 리렌더링되었지만 자식 컴포넌트는 리렌더링 될 필요가 없는 경우가 있습니다. 하지만 virtual DOM에 자식 컴포넌트를 다시 그립니다. 이 때 이를 방지하기 위해 shouldComponentUpdate 메소드를 사용합니다. true를 반환하면 아래 나머지 메소드를 모두 실행하지만 false가 반환될 경우 실행하지 않습니다. 이 메소드는 성능 최적화를 위한 메소드입니다.

 

6. getSnapshotBeforeUpdate : 마지막 렌더링 결과가 DOM에 반영되었을 때 호출됩니다. (브라우저에 반영되기 바로 직전), 주로 스크롤의 위치나 DOM의 크기와 같은 정보를 사용할 때 사용합니다 (ex, 채팅 프로그램의 스크롤 위치)

 

7. componentDidUpdate : 업데이트된 직후에 호출되는 메소드입니다. 최초 렌더링 시에는 호출되지 않습니다. 만약 getSnapshotBeforeUpdate가 구현되었다면 반환값을 인자로 받습니다.주로 업데이트되기 전과 업데이트 후 값을 비교하여 어떠한 처리를 할 때 사용합니다.

 

Unmount

8. componentWillUnmount : 컴포넌트가 마운트 해제되기 직전에 호출됩니다. 주로 타이머를 제거하거나 네트워크 요청을 취소하는 등에 사용됩니다.

 

 

 

 

 

 

reference

---

 

 

http://jeonghwan-kim.github.io/js/2017/05/15/webpack.html

웹팩의 기본 개념

https://ko.reactjs.org/docs/react-component.html

React.Component – React

https://velopert.com/

VELOPERT.LOG