◆ ESSAY
import React, {Component} from 'react'
class IterationSample extends Component {
render() {
const names = ['눈사람', '얼음', '눈', '바람']
const nameList = names.map((name) => <li>{name}</li>)
return <ul>{nameList}</ul>
}
}
export default IterationSample
class App extends Component {
render() {
return <IterationSample />
}
}
특별한 거는 없지만, 콘솔에서 key가 없다는 에러가 발생한다. 가상 DOM을 비교하는 과정에서, Key값을 활용하여 변화가 일어나는지 확인하기 때문에, key값을 지정해줘야한다.
class IterationSample extends Component {
render() {
const names = ['눈사람', '얼음', '눈', '바람']
const nameList = names.map((name, index) => <li key={index}>{name}</li>)
return <ul>{nameList}</ul>
}
}
이제 에러가 나지 않는다.
보통은 이렇게 정적인 데이터를 쓰기보다는, 동적인 데이터를 더 렌더링할 기회가 더 많을 것이다.
import React, {Component} from 'react'
class IterationSample extends Component {
state = {
names: ['토니안', '강타', '문희준', '이재원', '장우혁'],
name: '',
}
handleChange = (e) => {
this.setState({
name: e.target.value,
})
}
handleInsert = (e) => {
this.setState({
names: this.state.names.concat(this.state.name),
name: '',
})
}
handleRemove = (index) => {
// this.state의 레퍼런스
const {names} = this.state
this.setState({
names: names.filter((item, idx) => {
return idx !== index
}),
})
}
render() {
const nameList = this.state.names.map((name, index) => (
<li onDoubleClick={() => this.handleRemove(index)} key={index}>
{name}
</li>
))
return (
<div>
<input onChange={this.handleChange} value={this.state.name} />
<button onClick={this.handleInsert}>추가</button>
<ul>{nameList}</ul>
</div>
)
}
}
export default IterationSample
층은 왜 쌓였고, 왜 서버로 돌아왔고, 에이전트 이후에도 스택이 남는 이유는 무엇인가. 그리고 스택이 이기는 것과 그 스택을 아는 사람의 가치는 왜 별개인가
React cache() 함수의 모든 이상한 규칙은 30여 줄짜리 구현에서 직접 따라 나온다. dispatcher, getCacheForType, WeakMap/Map 트리를 소스 레벨로 따라가며 요청 단위 메모이제이션의 동작을 끝까지 본다.
"use cache" 한 줄이 만드는 빌드 타임 변환, 캐시 키 직렬화, ResumeDataCache, cacheHandler, 그리고 Cache Components까지
"use client" 한 줄이 만드는 모듈 경계, 빌드 타임 변환, Flight 직렬화, 그리고 성능까지