ReactJS 개념 정리 3

React의 Event Handling

Event

Event를 사용할 때 주의사항

1. 이벤트 이름은 camelCase로 작성 => html의 onclick은 리액트JSX에서는 onClick

2. 이벤트에 실행 할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 객체를 전달

3. DOM 요소에만 이벤트를 설정할 수 있음

    div, button, input, form, span 등 DOM 요소에는 이벤트를 설정할 수 있지만,

    직접 만든 컴포넌트 에는 이벤트를 설정할 수 없음

컴포넌트 생성 및 불러오기

1. EventPractice.js 생성과 App.js에서 EventPractice 불러오기

이벤트 핸들링

2. onChange 이벤트 설정

3. input에 입력한 값을 state에 저장

4. 입력한 값이 state에 저장되었는지 확인

5. handleChange(), handleClick() 메서드 추가 하기

컴포넌트에 임의 메서드를 만들면 기본적으로 this에 접근할 수 없기 때문에 constructor에서 각 메서드를 this와 binding 해 주어야 함

즉 메서드에서 this를 사용할 수 있도록 메서드에 this를 binding 해주는 것

6. handleChange(), handleClick() 메서드 구현 및 handler method 연결

7. transform-class-properties 문법 사용 : handleChange(), handleClick() 메서드 구현 : 바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드 정의

8. 여러 개의 input 과 state 관리 => [e.target.name]: e.target.value

9. onKeyPress 이벤트 핸들링 : input에서 엔터키를 눌렀을 때 handleClick 메서드를 호출한다.

 

ref: DOM에 이름 달기

DOM

DOM 에 접근하기

HTML에서는 id 를 부여하여 DOM 에 접근

<div id='root'></div>

document.getElementById(‘root’)

리액트에서는 ref 를 사용하여 DOM 에 접근

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

DOM에 접근하는 예제

HTML DOM 에 ref 사용 : 특정 input 에 focus 주기

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

this.input.focus()

컴포넌트에 ref 사용 : 스크롤 박스 조작하기

<ScrollBox ref = { (ref) => { this.scrollBox= ref }} />

this.scrollBox.scrollToBottom()

컴포넌트 생성 및 불러오기

1.ValidationPractice.js 와 ValidationPractice.css 생성

HTML DOM에 ref 속성 추가하기

2. input 에 focus를 주기 위해서 ref 속성 추가

 

 

컴포넌트 반복

컴포넌트 반복 : map() 함수

map() 함수

arr.map(callback, [thisArg])

1) callback : 새로운 배열의 요소를 생성하는 함수이며, 파라미터는 다음 3가지

- currentValue : 현재 처리하고 있는 요소

- index : 현재 처리하고 있는 요소의 index 값

- array : 현재 처리하고 있는 원본 배열

2) thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스

컴포넌트 생성 및 불러오기

1. IterationPractice.js 생성 App.js에서 IterationPractice 불러오기

key

리액트에서 key는 배열을 렌더링 했을 때 어떤 엘리먼트에 변동이 있었는지 알아낼 때 사용

1) key가 없으면 - 가상 DOM을 비교하는 과정에서 리스트를 순차적으로 모두 비교하여 변화를 감지

2) key가 있으면 - key값을 사용하여 어떤 변화가 일어 났는지 빠르게 감지

배열에 데이터 추가 기능 구현

1. 초기 state 설정하기 : const로 정의 했던 배열을 state에 저장

2. 데이터 추가를 위한 input과 button을 렌더링 하고, 이벤트 핸들러 메서드 구현

배열에 데이터 삭제 기능 구현 #1 – spread operator 사용

1. 아이템을 두 번 클릭(onDoubleClick)하면 제거 하도록 기능 구현

2. handleRemove메서드에서 전개연산자(spread operator) … 를 사용하여 뒤에 위치한 배열값을 그대로 꺼내서 현재 배열에 복사

배열에 데이터 삭제 기능 구현 #2 – filter 함수

1. 아이템을 두 번 클릭(onDoubleClick)하면 제거 하도록 기능 구현

2. handleRemove 핸들러 메서드에서는 클릭한 아이템과 일치하지 않는 것들만 filtering 해서 보여줌