React 기본 - JeongWu/fe-javascript GitHub Wiki

React

React?

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

특징

  • 컴포넌트 기반
    • 재사용성, 유지보수성
    • 종류: 클래스형(stateful), 함수형(stateless)
  • One Way Data Flow(단방향)
    • 부모 데이터 변경: State
  • Props and State
    • props: 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터
    • state: 사용자와의 상호작용을 통한 동적인 데이터
  • Virtual DOM
    • 변경된 부분만 실제 DOM의 반영

React Element

  • type과 props를 가지는 객체
React.createElement(
  'div',
  { className: 'greeting' },
  'Hello World!'
)
{
  type: 'div',
  props: {
    className: 'greeting',
    children: 'Hello World!'
  }
}
  • syntatic sugar-> jsx

JSX

// with jsx
<button className='button button-blue'>
  <b>
    OK!
  </b>
</button>

// without jsx
React.createElement(
  'button',
  { className: 'button button-blue' },
  React.createElement(
    'b',
    null,
    'OK!'
  )
);

문법

  • 닫혀있는 태그 ```
    ...
  • 두개이상 element 하나의 태그로 감싸져있어야함
import React, { Component } from 'react';

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

export default App;
  • 표현식 사용
    • {} 사용
    • ex) 함수 호출식, 삼항 연산, 문자열, 배열...
    • 조건/제어문, 반복문 -> 밖에서 사용
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
} 
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

React Component

  • props를 전달받아 React element를 반환하는 function or class
function Button(props) {
  return (
    <button className={`button button-${props.color}`}>
      <b>
        {props.children}
      </b>
    </button>
  )
}

or

const Button = ({ color = 'blue', children = 'OK'}) => (
  <button className={`button button-${color}`}>
    <b>
      {children}
    </b>
  </button>
)
 <Button color='blue'>
    OK!
  </Button>

Render React Element

React DOM

  • render()
    • containerDOM에 reactElement를 그린다
    • 기존에 render된 element가 있으면 update한다
    • callback은 render/update 후에 호출됨
ReactDOM.render(
  reactElement,
  containerDOM,
  [callback]
)
const element= <h1>hello,world!</h1>;
ReactDOM.render(element, document.getElementByID('app'));
  • hydrate()
    • render()와 기능은 동일
    • ReactDOMServer.renderToString() 결과 재활용
ReactDOM,hydrate(
reactElement,
containerDOM,
[callbak]
)

ReactDOMServer

  • renderToStrint()

React Event Handling

  • addEverntListner() / removeEventListener() 사용할 필요 없음
  • string이 아닌 실제 function 전달
<button onClick={activateLasers}>
  Activate Lasers
</button>
  • default 동작 막기 e.preventDefault()
⚠️ **GitHub.com Fallback** ⚠️