[React] React 기본

20200324 기록

What is "React"

• frontend library
• Component - 하나의 의미를 가진 독립적인 단위 모듈 → 나만의 HTML 태그
• React는 이 component 단위로 개발을 진행

JSX

• 자바스크립트 확장 문법
• 리액트 문법에서는 반드시 JSX를 리턴해 주어야 한다.
• JSX를 사용할 때 지켜야 할 규칙
  1. 반드시 하나의 엘리먼트로 감싸야 한다.
  2. 자바스크립트 코드를 작성할 때 {}안에 작성해야한다.
  3. JSX 내부에서는 if문을 사용할 수 없다. → IIFE or 삼항연산자를 사용해야 한다.
     *IIFE(Immediately Invoked Function Expressions) - 즉시 호출 함수 표현식
  4. 엘리먼트의 클래스 이름을 적용할 때, className을 사용한다.

States

• 변할 수 있는 값
• 컴포넌트를 사용하는 도중 컴포넌트 내부에서 변할 수 있는 값
• Props는 외부로부터 전달받은 값 / state는 내부에서 변하는 값
• Props and state in real life

Props
- 이름
- 설명

State
- 나이
- 현재 사는 곳
- 취업 여부
- 결혼/연애 여부

Lifecycle

• 생성될 때
• 화면에 등장한 후
• 새로운 props를 받을 때
• 새로운 상태를 가질 때
• 새로운 상태를 갖고 난 후
• 화면에서 사라지기(unmount) 전