16Feb2020 TIL

---

React

: 상호작용이 많은 UI 를 만들 때 사용하는 자바스크립트 기반의 라이브러리

 

 

---

 

React 특징

• Component 기반
• JSX 
• Virtual DOM
• Prop
• State

 

---

 

Component

: Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function. Components come in two types, Class components and Function components. (출처 : W3school)

 

 

---

JSX

• JSX stands for JavaScript XML.
• JSX allows us to write HTML in React.
• JSX makes it easier to write and add HTML in React. (출처 : W3school)

 

---

1. 인간에게 보다 친숙한 언어인 JSX는 Babel 을 사용하여 JSX를 compile 하는 과정이 필요하다.
2. JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement()  and/or appendChild() method.
3. With JSX you can write expressions inside curly braces { }. The expression can be a React variable, or property, or any other valid JavaScript expression.
4. The HTML code must be wrapped in ONE top level element.
5. Close empty elements with />

 

---

Virtual DOM

: 기존의 DOM과 자체 비교해 다른 부분만 rendering 한다. 

 

---

PROP 

: JavaScript 의 parameter 같은 역할. Read-Only. 

상위 객체에서 하위 객체로 넘겨주는 속성 (역방향은 X)

 

const Car = (props) => (
  <div>
      <h1>{prop.info.brand}</h1>
      <h2>{prop.info.color}</h2>
  </div>
);

const data = {brand : 'ferarri', color : 'red'};

ReactDOM.render(
  <Car info = {data} />,
  document.getElementById('root')
);

 

 

---

State

: JavaScript 에서 function 안의 variable 같은 역할

class에서만 활용할 수 있으며, constructor 안에서만 정의할 수 있다. 

constructor 밖에선 .setStatus() method를 이용해 변경해주어야 한다.

 

class Animal extends React.Component {
  constructor(props) {
    super(props);
    this.grow = this.grow.bind(this) //<- 중요!
    this.status = {size : "small"};
  }
  
  grow() {
  	this.setStatus({size : "medium"})
  }
  
  render() {
    this.grow();
    return (
      <h1>Welcome Animal Kindergarten</h1>
      <h2>This is {this.status.size} room.</h2>
    )
  }
};

ReactDOM.render(
  <Animal />,
  document.getElementById('root')
);
  

---

 

Lifecycle

: component들이 생성되고 렌더된 후 소멸되는 일련의 과정

아직 왜 이것을 알아야 하는지 그 필요성과 이유를 모르겠음..!

 

 

 

---

 

Functional component vs Class component

 

함수형 컴포넌트는 렌더링 된 값을 고정시킨다. (출처: 이곳)

클래스형 컴포넌트는 this.prop의 this가 고정된 값이 아닌 실행된 순간의 this를 받기 때문에 변동될 수 있다.