[React] 시작하기

react

React

React란 무엇인가?

React는 유저인터페이스 구현을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리
Reaact는 여러 종류의 컴포넌트들을 가지고 있지만 React.Component의 서브클래스를 사용할 것

    class ShoppingList extends React.Component {
        render() {
            return (
                <div className="shopping-list">
                    <h1>Shopping List for {this.props.name}</h1>
                    <ul>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                    </ul>
                </div>
            );
        }
    }
  • xml 과 비슷한 태그들을 사용한다
  • React에게 무엇을 랜더링 하고 싶은지 알려준다
  • React는 데이터가 변경 될 떄 올바른 컴포넌트 들을 업데이트하고 랜더링 한다.
    • ShoppingList는 React 컴포넌트 클래스 혹은 React 컴포넌트 타입
    • 하나의 컴포넌트는 props라 불리는 파라미터를 사용하고, render 메서드를 통해 표시할 뷰 계층 구조를 반환한다

render메소드

  • render 메소드가 랜더링 하길 원하는 내용을 반환하면 React는 그 내용을 가져와 스크린에 랜더링 한다
  • React엘리먼트를 반환한다
    • 랜더링 할 부분에 대한 간단한 내용
  • 구조를 더 쉽게 작성할 수 있게 해주는 JSX라는 특별한 문법을 사용한다
  • <div />라 쓰면 빌드 시 React.createElement('div')로 변환된다.
    return React.createElement('div', {className: 'shopping-list'},
        React.createElement('h1', /* ... h1 children ... */),
        React.createElement('ul', /* ... ul children ... */)
    );
  • 위 코드는 <div/>와 동일하다