[TIL] 2020-03-14

[groomdue]

가장 핫한 프론트엔드 라이브러리🔥, React 가지고 놀아보기

 

[배운 내용]

 

<React Project 구조>

- index.js 파일에 들어가면 ReactDOM.render(<App />, document.getElementById('root')); 가 존재한다.

- 이 코드가 의미하는 것은 "App 컴포넌트를 root라는 id를 가진 element에 render하라"라는 뜻이다.

- 그리고 publib/index.html 파일로 들어가면, <div id="root"><div> 코드가 있을 것이며, 바로 여기에 렌더링 되는 것이다.

 

<React 기초 문법>

- 원래 HTML Element에 클래스명을 설정하기 위해서는 class 속성을 사용해야한다.

- 하지만 React에서는 class가 아닌 className이라는 속성을 사용해서 클래스명을 지정한다. 왜냐하면, React에서 class는 class 컴포넌트를 선언할 때, 그 class로 보기 때문이다.

- React 컴포넌트에서 반환하는 HTML 코드에서의 최상위 Element는 단 한 개여야 한다.

 

<Class Component>

- 예전의 리엑트에서는 Class Components가 중요한 역할을 맡았었다. 그러나 React 16.8.0 업데이트 이후로 뒤에서 배울 내용인 Hooks에 대한 기능이 추가되어 Functional Component에서 LifeCycle API와 state 기능을 구현할 수 있어 잘 사용하지는 않는다.

[code]

// Class Component Example

import React, { Component } from 'react';

class Component1 extends Component {
  render() {
    return ( <div>Hello World!</div>

);
  }
} 

export default Component1;

 

// 1번 줄 - import React, { Component } from 'react';

→ react 라이브러리에서 함수 또는 클래스를 import 한다. import 문법은 표준화된 자바스크립트인 ECMA Script6의 문법 중 하나로, export(확장)된 다른 파일의 함수 또는 클래스를 불러와 사용할 수 있도록 하는 기능이다.

 

// 3번 줄 - class Component1 extends Component

→ Component1이라는 컴포넌트를 class 문법을 사용해 선언한다.

 

// 4번 줄 - render()

→ render()는 React.Component의 하위 class에서 반드시 정의해야 하는 메서드이며, 리엑트에서 사용하는 컴포넌트를 생성한다.

 

// 5번 줄 - return (<div>Hello World!</div>);

→ 4번 줄의 render 함수를 통해 컴포넌트를 만들기 위한 HTML을 반환한다.

 

// 9번 줄 - export default Component1;

→ 다른 자바스크립트 파일에서 Component1이라는 class를 사용할 수 있게 export 한다.

 

<Functional Component>

- 예전에는 단순히 부모 컴포넌트를 받은 값을 출력만 해주는 컴포넌트였다.

- React Hooks 업데이트 이후로 Functional Components에서도 상태 관리(state)와 LifeCycle API 사용이 가능해졌다.

 

[code]

// Functional Component Example

import React from 'react';

const Component2 = () => {
  return (
    

Hello World!

  );
}

export default Component2;

여기서 중요한 부분은 ECMA Script 6부터 생긴 Arrow Function이라는 새로운 함수 선언 방식이다.

[예시]

 

Arrow Function(새로운 선언 방식) const func1 = () => "Hello World!";  const func2 = num => num * 2; [변수 선언부] [함수명] = [함수 인자 값] => [함수 내부 코드]

기존 선언 방식 function func1() {   return "Hello World!"; } function func2(num) {   return num * 2; }