[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 (
);
}
export default Component2;
여기서 중요한 부분은 ECMA Script 6부터 생긴 Arrow Function이라는 새로운 함수 선언 방식이다.
[예시]
|
Arrow Function(새로운 선언 방식) const func1 = () => "Hello World!"; [변수 선언부] [함수명] = [함수 인자 값] => [함수 내부 코드] |
기존 선언 방식 function func1() { |