✔ React.js

주요개념

React.js 공식문서를 바탕으로 작성되었습니다.

1. Hello World

• Babel: JS comiler
• ReactDOM: <script> 태그로 불러올 때, API 이용. 뭔지 잘 모르겠다..

2.JSX 소개

• JavaScript XML
• JS 코드 안에서 UI 작업
• XSS(cross-site-scripting) 공격으로부터 안전

3. Element 렌더링

• element: React 앱의 가장 작은 단위 / immutable
• root DOM node

  	<div id="root"></div>

이 태그 안에 들어가는 모든 element를 React DOM에서 관리

• immutable이라서 변경이 필요할 때마다 ReactDOM.render() 호출 필요 (실제로는 stateful components 사용해서 매번 호출하진 않음)
• React DOM이 변경된 부분만 찾아서 적용

4. Components 와 Props

1. Components

   • UI를 independet, reusable, isolted 하게 함
   • Props라는 input받아 화면에 보여질 것 return
   • function이나 class로 정의

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

    const element = <Welcome name="Sara" />;
    ReactDOM.render(
      element,
      document.getElementById('root')
    );

• 코드 작동 방식
  1. ReactDOM.render()을 <Welcome name="Sara"/> element와 호출됨
  2. React가 Welcome component를 {name: 'Sara'} prop과 호출
  3. Welcome component가 <h1>Hello, Sara</h1> element를 return
  4. React DOM이 update
• HTML 태그는 소문자로 시작하지만, React component 는 대문자로 시작

2. Props

   • inputs
   • 모든 components는 props의 값을 변경해선 안됨..

5. State and Lifecycle

1. state
   • props과 유사하지만 private하고, component가 controll
   • component를 class로 작성하면 single instances를 사용해서 state 이용 가능 (singleton이란거 아닌가???)
   • 반드시 this.setState(); 사용. 직접 수정하면 렌더링 안됨
   • assign은 반드시 constructor에서
2. Lifecycle
   • lifecycle methods
   • component가 mount되거나 unmount될 때 작동
   • componentDidMount(), componentWillUnmount()

• top-down | unindirectional flow : 컴포넌트가 자신의 state를 자식 컴포넌트의 props로 전달

---

꼼지락🐥

GDSC에서 리액트 처음 시작하는데, 공식문서 읽어오는게 과제였다.
개념 6까지 읽으면되는데 5까지 읽고 질려서 내일로 미루기....
그래도 component가 reusable하고 되게 독립적인게 좋은 프레임워크인 것 같다.
예전에는 컴포넌트 분리하는게 복잡하게만 느껴졌는데, 하다보니 최대한 잘 분리하고, coupling이 낮게? 만드는게 좋게 느껴진다.