Neo's Programming

Class Component

import React, {Component} from 'react';

class App extends Component{
render(){
return(

React {this.props.속성명}

);
}
}
export default App;

Function Component

import React from 'react';

function App(props){
return(

React {props.속성명}

)
}
export default App;

import React from 'react';

const App({data}){
return(

React {data}

)
}
export default App;
->return 생략 가능

state, LifeCycle API를 이용하여야 할 때만 Class Component 사용하는 것이 좋다.
이는 속도에 의한 차이이다.

총 열가지의 LifeCycle 메서드 존재
Will 접두사 - 작업 전 동작
Did 접두사 - 작업 후 동작

LifeCycle
- Mount, Update, UnMount로 분류

Mount
- Dom 생성 의한 웹브라우저 상 컴포넌트 활성화

Mount Call Method
constructor - 컴포넌트를 만들시 호출되는 클래스 생성자
getDerivedStateFromProps - props 값을 state 동기화 메서드
Ex)
static getDerivedStateFromProps(nextProps, prevState){
if(nextProps.value!==prevState.value){
return {value:nextProps.value};
}
return null
}
render - UI 렌더링 함수
componentDidMount - 컴포넌트가 웹브라우저 상 활성화 후 호출 메서드

Update
- porps,state 변경
- component 리렌더링
- this.forceUpdate 강제 렌더링 트리거
getDerivedStateFromProps - props 변경 시 호출
shouldComponentUpdate - 컴포넌트 리렌더링 여부 결정, state 변경 시점
Ex)
shouldComponentUpdate(nextProps, prevState)
메서드 생성하지 않으면 항상 true
render - 컴포넌트 리렌더링
getSnapshotBeforeUpdate - 변화된 내용을 DOM 반영 전 호출
Ex)
getSnapshotBeforeUpdate(prevProps, prevState)
이전 속성과 현재 상태의 속성 데이터 비교하여 처리 가능
componentDidUpdate - 컴포넌트 업데이트 끝난 후 호출
Ex)
componentDidUpdate(prevProps, prevState, snapShot)
전,후 컴포넌트의 데이터 접근 가능. 반환값이 있다면 snapShot에서 확인 가능

UnMount
- 컴포넌트를 DOM에서 제거
componentWillUnmount - 웹브라우저에서 컴포넌트가 사라지기 전 호출

state={

datas:['A','B','C',

data:''

}

state 기반 Array 형태 데이터 추가

Ex)

hadleInsert=()=>{

this.setState({

datas: this.state.datas.concat(this.state.data),

data:''

}

)

}

state 기반 Array 형태 데이터 삭제

handleRemove=(index)=>{

const {datas} = this.state;

this.setState({

dates:[

...datas.slice(0,index),

...datas.slice(index+1, datas.length)

]

}

)

}

const list = this.satae.data.map(

(data, index)=>(

<li key={index} onClick={()=>this.handleRemove(index)>

{data}

</li>

)

}

ES6 적용

this.state.datas.slice(0,index).concat(this.state.datas.slice(index+1,this.state.length))

filter 함수

- 배열의 특정 조건 만족 값만 추출 후 새로운 배열 생성

Ex)

const {datas} = this.state;

this.setState({

datas:data.filter((item,i)=>i!==index)

}

)

}

HTML은 id를 이용
Ex)

React Comonent에서는 id값을 이용할 경우 DOM 렌더링시 충돌이 일어 날 수 있어서 ref를 이용

ref
- DOM을 직접 접근 할 시 사용
  포커스 등
- props 설정과 동일하게 처리
- 콜백 함수 전달
- 컴포넌트 상에 ref 이용 가능, 외부에서 접근 시 사용

Ex)

<input ref={(ref)=>{this.input=ref}></input>

컴포넌트 내부 메서드
Component를 extends 받은 컴포넌트 내부에 구현
Ex)ScollBox
const { scrollheight, clientHeight} = this.box;
메서드명 = () =>{
this.box.sctollTop = scrollheight - clientHeight;
}

ref 연결 후 내부 메서드 사용

<div>
<ScrollBox ref={(ref)=>this.scrollBox=ref}/>
<button onClick={()=>this.scrollBox.메서드명()}>클릭</button>

</div>

이벤트
- 웹 브라우저와 DOM 요소간의 상호 작용
- camelCase로 이벤트 명 작성
- 함수 형태 값 전달
- DOM 요소에만 설정
- 컴포넌트 자체 이벤트 설정은 불가하지만 props를 이용한 설정은 가능
Ex)

<div onClick={this.props.onClick}>{}</div>

<input onChange={

(e)=>{
console.log('onChange');
console.log(e.target.value);//변경되고 있는 값
}
}/>

state = {
message: ''
}

<input type="text" name="message" placeholder="input" value=this.state.message

onChange={
(e)=>{
this.setState({
message:e.target.value
}
)
}
}>

</input>

이벤트 기본 방식

state={
message:''
}
constructor(props){
supter(props);
this.hadleChange=this.hadleChange.bind(this);
this.hadleClick=this.hadleClick.bind(this);
}

hadleChange(e){
this.setState({
message:e.target.value
}
)
}

hadleClick(){
this.setState({
message:''
}
)
}

<input value={this.staet.message} onChange={this.hadleChange}/>

<button onClick={this.hadleClick}/>

Propperty Initialize Syntax
- constructor 수정 할 필요가 없다
- 이벤트 기본 방식 코드 중 아래와 같이 수정하여 사용하면 된다
- constructor는 제외
hadleChange = (e) => {
this.setState({
message:e.target.value
}
)
}

hadleClick = () => {
this.setState({
message:''
}
)
}

이벤트가 여러개 일경우
state = {
A:'',
B:''
}

hadleChange=(e)=>{
this.setState({
[e.target.name]:e.target.value
}
)
}

hadleClick=()=>{
this.setState({
A:'',B:''
}
)
}

hadleKeyPress=(e)=>{
if(e.key==='Enter'){
this.hadleClick();
}
}

<input name="A" vlaue={this.state.message} onChange={this.hadleChange} onClick={this.hadleClick} onKeyPress={this.hadleKeyPress/>

<input name="B" vlaue={this.state.message} onChange={this.hadleChange} onClick={this.hadleClick} onKeyPress={this.hadleKeyPress/>

Component

- 데이터에 따른 UI 형성
- Life Cycle API 의한 컴포넌트가 화면상 변화가 일어 날 때 처리
- 메서드 이용하여 기능 추가

- export 이용하여 사용

- 불러 올 경우 import 컴포넌트 from './컴포넌트'

props
- 속성 사용
  렌더링->값 설정->기본 값 설정-> 값 검증

Ex)

<div>{this.props.속성명}></div>

속성 값 설정
호출.js
<컴포넌트 test="test"/>

속성 기본 값 설정
default props
컴포넌트.js
컴포넌트.defaultProps={
test : '기본 속성 값'
}

속성 검증
import PropTypes from 'prop-types'

컴포넌트.PropTypes ={
속성 명 : PropTypes.string//설정
}

static defaultProps = {
속성 명 : '속성 값'
}
static propTypes = {
속성 명 : PropTypes.string
}

숫자 값 경우 ""이 아니라 {} 처리 해서 넘겨야한다

필수적인 요소로 지정하려면 isRequired 처리
속성 명 : PropTypes.string.isRequired

state
- props는 부모 컴포넌트에서 설정
- 컴포넌트 자신은 props를 읽기 전용으로만 접근이 가능하여 state 이용
- this.setState() 이용하여 업데이트 처리

- state 초기 값은 컴포넌트 생성자 method constructor 내부에서 설정
Ex)
constructor(props){
super(props);
this.state={
number : 0
}
}

or

state = {
number : 0
}

{this.state.number}

변경 시
onClick=()=>{
this.setState({
number: this.state.number+1
}
)
}

배열 처리되어 있는 데이터를 이용하여 Component 처리

render(){

const arr = ['A','B','C'];

const arrList = arr.map(

(arrData, idx)=>(<li key={idx}>{arrData}</li>)

);

return(

<ul>

{arrList}

</ul>

->map 처리 시 key 값이 존재해야한다. 이는 데이터가 가진 고유의 값이 필요하기 때문이다

->arr 처리가 된 것을 state 처리를 하여 사용 가능하다

state={

arr = ['A','B','C']

}

arr.map => this.state.map 으로 변경하여 처리하면 된다.

JSX
- Javascript 확장 문법, XML과 비슷
- 가독성이 높다
Ex)
var a=(

<div>

<h1>JSX</h1>

</div>)

- 반드시 부모요소로 감싸야한다.

  DOM 트리 구조 하나여야하기 때문

const(ES6)
- 변경 불가능한 상수

let(ES6)
- 동적인 값 저장

Ex)

const a = 'const'

<h1>{a}</h1>

- const와 let은 scope 영역에서 사용, var과는 다르다

JSX 내부의 if

- 삼항 연산자를 이용

Ex)
const a = true;
{ a ? 't' : 'f' }

null 이외의  false값 렌더링 할 시 && 연산자 이용

{ a && 't }

DOM 요소에 스타일 적용 시 문자열 적용이 되지 않으나 CSS 스타일을 Javascript 형식으로 적용 가능

- camelCase key 사용

Ex)

const style = {
backgroundColor : 'gray'
}

<div style={style}></div>

className 사용

Ex)

A.css
.my-div{
backgroundColor : 'gray'
}

A.js

import './A.css'

<div className="my-div"></div>

주석 처리는 {/*주석*'} 형식으로 한다.

1. React
- 오직 View만 신경쓰는 라이브러리
- 지속적으로 데이터가 변화하는 대규모 어플리케이션 구축 용도
- 단순 라우팅 정도면 정적이 페이지가 효율

2. 렌더링
- 사용자 화면에 뷰를 보여 주는 것
- 초기 렌더링 reder(){}함수에서 처리
- 재귀적 렌더링 일어남
- 렌더링 작업이 종료 시점에서 html markup 생성되고 dom 요소에 주입
- html 코드 생성 후 dom에 해당 내용 주입하면 이벤트가 적용

3. 조화 과정
- 뷰를 업데이트
- 뷰의 요소가 변경
- reder()에 의하여 발생
- 전,후 DOM 노드들을 비교하여 업데이트

DOM(Document Object Model)
- 객체를 문서 구조로 표현하고 XML이나 HTML로 작성

4. Vitual DOM
- 실제 DOM에 접근하는 것이 아니라 추상화된 Javascript 객체를 구성하여 사용
->데이터 업데이트 중 UI를 Viture DOM 리렌더링
-> 이전, 현재 내용 비교하여 바뀐 부분만 DOM 적용

5. 리액트와 Vitual DOM은 업데이트 처리 간결성 제공