티스토리 뷰
1. 직전에 포스트의 예제를 이어서 사용한다.
1-1 삭제버튼을 하나 추가하여 설명을 이어 간다.
2. 아래 코드를 보면 인스턴스 메소드나 인스턴스 변수로의 접근은 this, 로컬은 그냥 변수 이름으로 접근한다.
2-1 this의 여부는 아주 중요하다. 이벤트 등록 부분을 보면 this를 사용하여야 인스턴스 메소드로 접근이 가능하다.
2-2 이전에도 이야기 했듯 이벤트에 메소드를 등록하는 것은 메소드 호출이 아니고 메소드 자체의 할당이다.
2-2-1 사용자가 클릭한 시점에 해당 메소드가 호출되어야 함을 의미한다.
2-2-2 TodoList를 보면 Remove all이라는 버튼이 있다. 이 버튼의 click 등록시 해당함수 끝에 bind(this)가 있다.
2-2-2-1 이 부분은 이미 언급했듯 함수의 호출이 아니고 할당이기 때문인데,
2-2-2-2 할당 시 context를 잃어버려, 함수 호출 시 onRemoveAllClicked 내부의 this가 동작하지 않기 때문이다.
2-2-2-3 그렇기 때문에 명시적으로 render에서 접근가능한 context를 바인딩 해 주어야 한다.
2-2-2-4 바인딩의 유무는 context의 필요에 따라서 해주면 된다.
2-2-2-5 이것이 번거로울 경우는 생성자에서 아예 처음에 this.onRemoveAllClicked 함수 변수에 미리 지정한다.
2-2-2-5-1 this.onRemoveAllClick = this.onRemoveAll.bind(this) 코드를 사용하면 된다.
class TodoApp extends React.Component {
render() {
const title = "TO DO List"
let todos = [
"Take your mask",
"Wash your hands"
]
return (
<div>
<Header title={title} />
<Action />
<TodoList todos={todos}/>
<AddTodo />
</div>
)
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
</div>
)
}
}
class Action extends React.Component {
onNextTodoClick() {
alert('Select Next todo clicked')
}
render() {
return (
<div>
<button onClick={this.onNextTodoClick}>Next Todo?</button>
</div>
)
}
}
class TodoList extends React.Component {
onRemoveAllClicked() {
console.log(this.props.todos)
}
render() {
return (
<div>
<button onClick={this.onRemoveAllClicked.bind(this)}>Remove All</button>
{
this.props.todos.map(todo => <Todo key={todo} todoText={todo} />)
}
</div>
)
}
}
class Todo extends React.Component {
render() {
return (
<div>
<p>
{this.props.todoText}
</p>
</div>
)
}
}
class AddTodo extends React.Component {
onFormSubmit(e) {
e.preventDefault()
const typedTodo = e.target.elements.newTodo.value
if (typedTodo) {
alert(typedTodo)
e.target.elements.newTodo.value = ''
}
}
render() {
return (
<div>
<form onSubmit={this.onFormSubmit}>
<input type="text" name="newTodo" />
<button>Add</button>
</form>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.getElementById('app'))
3. 결과 화면
'Client Technologies > React' 카테고리의 다른 글
React : 함수 컴포넌트, 기본 props 값 설정하기 (0) | 2020.10.26 |
---|---|
React : State 사용하기와 부모 컴포넌트 함수 호출 (0) | 2020.10.26 |
React : 리액트 클래스 생성과 Props 사용하기 (0) | 2020.10.23 |
React : 이벤트 처리와 배열 다루기 (0) | 2020.10.22 |
React : JavaScript Let, Const, Arrow function (0) | 2020.10.20 |
- Total
- Today
- Yesterday
- 도커 개발환경 참고
- AWS ARN 구조
- Immuability에 관한 설명
- 자바스크립트 멀티 비동기 함수 호출 참고
- WSDL 참고
- SOAP 컨슈머 참고
- MySql dump 사용법
- AWS Lambda with Addon
- NFC 드라이버 linux 설치
- electron IPC
- mifare classic 강의
- go module 관련 상세한 정보
- C 메모리 찍어보기
- C++ Addon 마이그레이션
- JAX WS Header 관련 stackoverflow
- SOAP Custom Header 설정 참고
- SOAP Custom Header
- SOAP BindingProvider
- dispatcher 사용하여 설정
- vagrant kvm으로 사용하기
- git fork, pull request to the …
- vagrant libvirt bridge network
- python, js의 async, await의 차이
- go JSON struct 생성
- Netflix Kinesis 활용 분석
- docker credential problem
- private subnet에서 outbound IP 확…
- 안드로이드 coroutine
- kotlin with, apply, also 등
- 안드로이드 초기로딩이 안되는 경우
- navigation 데이터 보내기
- 레이스 컨디션 navController
- raylib