[리액트를 다루는 기술] 학습 1 일차

1장 왜 리액트인가?

• 템플릿과 컴포넌트
  • 템플릿은 주어진 데이터 셋을 바탕으로 HTML 태그 형식을 문자열로 반환하는 것
  • 컴포넌트는 해당 컴포넌트의 생김새와 작동 방식을 정의하는 것
• 초기 렌더링과 리렌더링
  • 렌더링은 해당 컴포넌트의 뷰와 이벤트에 대한 정보를 가지고 있는 객체를 반환하며 컴포넌트 내부의 컴포넌트는 재귀적으로 렌더링 된다.
    1. DOM 트리를 그리고
    2. 이벤트를 적용한다.
  • 리렌더링은 달라진 정보를 바탕으로 똑같이 객체를 렌더링한다. (DOM 트리를 그린다.) 하지만 바로 DOM에 반영하는 것이 아니라 기존 DOM 트리와 비교하여 달라진 부분만을 업데이트한다.
• React는 프레임워크가 아니라 라이브러리다.
  • React는 오직 View만을 신경쓰는 라이브러리다.

2장 JSX

• 리액트 컴포넌트를 반드시 하나의 부모 태그로 감싸야하는 이유
  • Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록하기 위함
  • <div></div> <Fragment></Fragment <></>
• 표현식
  • 기본적으로 {} 로 감싼 자바스크립트 구문을 렌더링한다.
  • 조건문은 상항 연산자를 사용한다.
  • JSX를 작성할 때 () 는 필수 사항이 아니며 보통 여러 줄에 걸쳐 코드를 작성할 때 사용한다.
  • && || 연산자를 사용하여 특정 조건을 해결한다.
  • style은 camelCase로 작성한다.

3장 컴포넌트

• 함수형 컴포넌트와 클래스형 컴포넌트의 차이점

  • 클래스형 컴포넌트는 state, lifecycle 사용과 임의 메서드 정의 가능
  • 함수형 컴포넌트는 Hooks의 도입으로 위의 기능을 사용할 수 있게 되었다.

• 태그 사이에 내용을 보여주는 props

  • props.children

• props의 타입 검증

  • component.propTypes = {
    	name: PropTypes.string,
      number: PropTypes.number.isRequired
      // isRequired는 props가 존재하지 않으면 경고 메시지를 출력한다.
    };

• 클래스형 컴포넌트에 state를 설정하는 방법

  constructor(props) {
  	super(props);
  	this.state = {
  		...
  	}
  }

  class Counter extends Component {
  	state = {
  		number: 0,
  		fixedNumber: 0
  	};
  	...
  }

• setState 함수는 비동기다.

  • 첫 번째 인자로 함수를 넘긴다면 동기적으로 사용가능하다.
  • 두 번째 인자로 콜백함수를 넘길 수 있다.

• 함수형 컴포넌트에서 state 사용하기

  • useState 함수를 사용한다.
    import { useState } from 'react'

  • 첫 번째 인자는 현재 상태, 두 번째 인자는 Setter 함수다.
    const [color, setColor] = useState('초기값')