티스토리 뷰
728x90
1. 리액트는 리액트 컴포넌트를 상속하는 다기능의 리액트 클래스보다 함수로 정의된 단순한 컴포넌트도 지원한다.
1-1 함수로 컴포넌트를 정의할 경우 리액트 컴포넌트를 상속하지 않기 때문에 상태값이나 구현 메소드를 쓸 수 없다.
1-2 그 대신 단순한 함수를 실행하는 것이기 때문에 속도가 빠르다.
1-3 보통 상태를 가지지 않는 단순 데이터 표출용 컴포넌트를 만들 때 활용된다.
1-4 부모 컴포넌트에서 속성을 전달하면 함수 컴포넌트의 props 인자의 내부 속성값으로 전달이 된다.
1-5 아래 코드는 지난 포스트에서 상태가 필요한 TodoApp, AddTodo 컴포넌트를 제외한 나머지를 변경하였다.
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.onRemoveAllClicked = this.onRemoveAllClicked.bind(this)
this.onNextTodoClicked = this.onNextTodoClicked.bind(this)
this.handleAddTodo = this.handleAddTodo.bind(this)
this.state = {
todos: [
"Take your mask",
"Wash your hands",
"Drink more water"
]
}
}
onRemoveAllClicked() {
this.setState(() => {
return {
todos: []
}
})
}
onNextTodoClicked() {
const index = Math.floor(Math.random() * this.state.todos.length)
alert(this.state.todos[index])
}
handleAddTodo(todo) {
if (!todo) {
return 'Please type vaild item'
} else if (this.state.todos.indexOf(todo) > -1) {
return 'Duplicated item typed'
}
this.setState((prevState) => {
return {
todos: prevState.todos.concat(todo)
}
})
}
render() {
const title = "TO DO List"
return (
<div>
<Header title={title} />
<Action
hasTodos={this.state.todos.length > 0}
onNextTodoClicked={this.onNextTodoClicked}
/>
<TodoList
hasTodos={this.state.todos.length > 0}
todos={this.state.todos}
onRemoveAllClicked={this.onRemoveAllClicked}
/>
<AddTodo handleAddTodo={this.handleAddTodo} />
</div>
)
}
}
const Header = (props) => {
return (
<div>
<h1>{props.title}</h1>
</div>
)
}
const Action = (props) => {
return (
<div>
<button
onClick={props.onNextTodoClicked}
disabled={!props.hasTodos}
>Next Todo?</button>
</div>
)
}
const TodoList = (props) => {
return (
<div>
<button
onClick={props.onRemoveAllClicked}
disabled={!props.hasTodos}
>Remove All</button>
{
props.todos.map(todo => <Todo key={todo} todoText={todo} />)
}
</div>
)
}
const Todo = (props) => {
return (
<div>
<p>
{props.todoText}
</p>
</div>
)
}
class AddTodo extends React.Component {
constructor(props) {
super(props)
this.onFormSubmit = this.onFormSubmit.bind(this)
this.state = {
error: undefined
}
}
onFormSubmit(e) {
e.preventDefault()
const typedTodo = e.target.elements.newTodo.value
const error = this.props.handleAddTodo(typedTodo)
this.setState(() => {
return {
error
}
})
e.target.elements.newTodo.value = ''
}
render() {
return (
<div>
{this.state.error && <p>{this.state.error}</p>}
<form onSubmit={this.onFormSubmit}>
<input type="text" name="newTodo" />
<button>Add</button>
</form>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.getElementById('app'))
2. props에 기본값을 설정하는 예제는 다음과 같다.
2-1 아래의 코드는 TodoApp에서 Header로 전달하는 title을 삭제하여 전달하지 않고 Header에 default값을 쓰고 있다.
2-1-1 마지막 부분을 보면 defaultProps라는 Header함수의 속성으로 객체를 할당하고 있다.
class TodoApp extends React.Component {
...
render() {
// const title = "TO DO List"
return (
<div>
{/* <Header title={title} /> */}
<Header />
<Action
hasTodos={this.state.todos.length > 0}
onNextTodoClicked={this.onNextTodoClicked}
/>
<TodoList
hasTodos={this.state.todos.length > 0}
todos={this.state.todos}
onRemoveAllClicked={this.onRemoveAllClicked}
/>
<AddTodo handleAddTodo={this.handleAddTodo} />
</div>
)
}
}
const Header = (props) => {
return (
<div>
<h1>{props.title}</h1>
</div>
)
}
Header.defaultProps = {
title: 'Your Todo List'
}
2-2 실행결과
728x90
'Client Technologies > React' 카테고리의 다른 글
React : node package.json scripts 속성 사용하기 (0) | 2020.10.28 |
---|---|
React : 리액트 컴포넌트 라이프 사이클과 LocalStorage (0) | 2020.10.26 |
React : State 사용하기와 부모 컴포넌트 함수 호출 (0) | 2020.10.26 |
React : React 클래스 이벤트 사용하기 (0) | 2020.10.23 |
React : 리액트 클래스 생성과 Props 사용하기 (0) | 2020.10.23 |
댓글
250x250
최근에 올라온 글
최근에 달린 댓글
- 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