Day 02) 1. 왜 하필 React 야? => NPM-Trends 2. 컴포넌트? 그거 복사 붙여넣기 아니야? => Component 3. 아직도 let, const 쓰니? 난 State 쓴다! => State

송인호·2022년 5월 10일
0

dailyStudy

목록 보기
2/35

<Zipcode placeholder="07250" readOnly />

readonly = 읽기 전용 수정 불가
disabled = 비활성화

컴포넌트: 다른 곳에서 import해 재사용 (margin 보다 padding사용)

리액트 쓰는 이유
1. 쓰는 사용자가 많다
2. 리액트 React.js, React-Native 앱(크로스플랫폼), React+Eletron pc앱
All In One

React의 핵심
Component
UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것

import 원본이 있는 것( 원본이 통제 = 원본 바뀌면 모두 바뀜) 내용은 바꿀 수 있음
즉, UI의 재사용

모두 컴포넌트가 될 수 있다, 페이지도 하나의 큰 컴포넌트

만들어본 function -> 컴포넌트 ( 페이지 컴포넌트 ) -> 함수형 컴포넌트

component 만드는 방법
클래스형, 함수형

함수형 쓰는 이유: 코드 길이가 짧다.( 화살표 함수 표현 )

처음에는 클래스를 썼는데 hooks을 쓰며 함수 컴포넌트를 쓰게 되었다. (use~~)

  1. 섞어 쓸 수 있나. 예,
  2. 굳이 클래스형을 알아야 하나? 예, 옛날 서비스는 클래스형 ( 회사 차이 )
  3. 클래스 -> 함수 변경 가능한가? 예, 대부분 회사들이 바꾸는 중

Hooks

Hooks? use로 시작하는 애들 -> useState, useEffect, ...

useState? -> State 만들어 주는애
state -> component 전용 변수

const[ state, setState ] = useState("철수")
state = 변수명
setState = 변수바꾸기(함수)
useState = 변수만들기
"철수" = 초기값

const[ count, setCount ] = useState(0)
console.log(count) <- 사용법
setCount(1) <- 바꾸는법

State 이해하면 documnet.getEle~ 안씀 ( let을 사용하는 것 보다 훨씬 편함 )

API 함수 DB 엑셀
입력값을 state에 담아야함

이벤트 핸들러 함수
onChange

12.1.0 17.0.2

제대로 못함

profile
프론트엔드 개발자

0개의 댓글