[웹서비스 개발팀] React

오늘의 목표

• 컴포넌트
• 이벤트
• 스타일링
  3시에 자습(기획팀 개발팀 팀장님들 회의)

• 클래스 베이스로 할때, function으로 할때 두가지 방식의 차이

• 리액트, key, children속성 등 이해하기

• 스타일링
• Bootstrap활용하기

REACT

1. 컴포넌트 알아보기

2. 클래스 vs 함수 컴포넌트

• 클래스 베이스로 할때, function으로 할때 두가지 방식의 차이

3. 클래스형 컴포넌트

• React.component를 상속할 때 render() 이용

• handleclick은 조회수, 좋아요 같은 것

4. 함수형 컴포넌트

• return문, props(부모 컴포넌트에서 전달되는 데이터를 의미) 이용
• useState() Hook이용

• constructor부분이 없으니까 심플해보임

5. 클래스형/함수형 컴포넌트 차이점

• 클래스형this 함수형Hook

6. 요즘의 추세

• 레거시 코드를 리팩토링

7. key와 children 속성 이해하기

• ID라는것은 가입때의 ID가 아닌 구분자로서 인식할 것, 유일성 unique key

실습

class-components>

** 생성자로 name 받아서 undefined로 뜨고 새로고침해줘야 이름이 적용된다?? 찾아보기..ㅠㅠ

• 함수형을 클래스형으로 바꿔서 input넣음

간단한 설명

//이제 아래 import들은 안해도된다. default로 정해짐
import React from 'react'
import {h1, h2, div, span} from 'react';

//jsx, tsx
const h1 =<h1>Hello World</h1>

//react
const h1_1 = React.createElement('h1',null, 'Hello World');