React

React

• User interface를 만들기 위한 Javascript library

React에서는 Web page의 부분적인 요소를 쪼개어 Javascript에서 함수 또는 Class로 만들 수 있는데 이를 Component라 하고 Component 이름의 첫 글자를 대문자로 표기한다.

Javascript안에서 문자열 표시 Backtick을 사용하지 않고 HTML tag를 직접 입력할 수 있는데 이를 JSX라고 한다.

React Component

 /* Functional Component */
function Greeting() {
  const test_ele = <h1>Hello, World</h1>
  
  return test_ele;
}
 /* Class Component */
class Greeting extends React.component {
  constructor() {
    this.test_ele = <h1>Hello, World</h1> 
  }
  
  render() {
    return this.test_ele; 
  }
}

간단하게 h1 tag에 Hello, World를 출력하는 Component를 만들어봤으니 Browser에서 출력해보자.

React render

Javascript에서 appendChild나 Module화 한 Function, class를 onload를 통하지 않고 ReactDOM.render()를 method를 통해 browser에 출력할 수 있다.

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

ReactDOM.render method의 인자로 (component, HTML body안 render할 위치)를 전달할 수 있다.

Component props

Component props는 properties의 줄임말로 Javascript에서 말하는 속성 값이다.

일단 상위 Component App을 간단하게 구현해보자.

class App extends React.component {
  constructor(props) {
    super(props)
    this.name = 'fstwon'
  }
  
  render() {
    return <Greeting name={this.name} />
  }
}

Greeting Component에 App이 가지고 있는 상태 이름을 전달해주었다.

이제 위에서 작성해놓은 Greeting을 수정해보자.

function Greeting (props) {
  return <h1>Hello, {props.name}</h1>
}

ReactDOM.render() method로 App component를 render하게 되면

이 Browser 화면에 출력된다.

Component lifecycle

Hooks의 useEffect가 추가되면서 class와 lifecycle method를 따로 구현하지 않아도 구현이 가능하여 Component의 생성 순서 개념만 짚고 넘어가자.

constructor -> componentWillMount -> render -> componentDidMount 순으로 생성되고 Component가 제거될 때 componentWillUnmout가 실행된다.

Reference

https://ko.reactjs.org/