Neo's Programming

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 으로 변경하여 처리하면 된다.