◆ ESSAY
기본적인 컴포넌트를 만들어 보자.
import React, {Component} from 'react'
class MyComponent extends Component {
render() {
return <div className="hello">brand new componenet</div>
}
}
export default MyComponent
import React from 'react'
import MyComponent from './MyComponent'
function App() {
return <MyComponent />
}
export default App
컴포넌트의 속성을 줄때 사용하는 값이다.
import React, {Component} from 'react'
class MyComponent extends Component {
render() {
return (
<div className="hello">brand new componenet is {this.props.name}</div>
)
}
}
export default MyComponent
아런식으로 부모에서 값을 넘겨 줄 수 있다. 또한 default값을 설정할 수도 있다.
import React, {Component} from 'react';
class MyComponent extends Component{
render() {
return (
<div className='hello'>
brand new componenet is {this.props.name}.
</div>
<div>
age: {this.props.age}
</div>
)
}
}
MyComponent.defaultProps = {
name: 'yceffort',
}
export default MyComponent;
유의할 점은 props에 아무값을 안넘겨줘도 (nane="") 값은 default 가 아닌 "" 가 나온다는 것이다. 왜냐하면 ""는 기본적으로 string으로 인식 되기 때문이다. 여기에 숫자등의 값을 넘기고 싶다면 를 써야 한다.
props의 값을 검증하기 위해서는 propTypes를 사용한다.
import React, {Component} from 'react'
import PropTypes from 'prop-types'
class MyComponent extends Component {
render() {
return (
<div>
<div className="hello">brand new componenet is {this.props.name}</div>
<div>age: {this.props.age}</div>
<div>company: {this.props.company}</div>
</div>
)
}
}
MyComponent.defaultProps = {
name: 'yceffort',
age: 30,
}
MyComponent.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
company: PropTypes.string.isRequired,
}
export default MyComponent
숫자에 문자열을 넣거나, required인데 값을 안넘겨주는 경우에도 렌더링은 된다. 다만 콘솔창에 에러가 출력된다.
props는 부모 컴포넌트가 설정하는 읽기전용 값이다. 컴포넌트 내부에서 값을 또 읽고 업데이트를 하려면 state를 써야 한다. state는
this.setState()메소드로 만 값을 업데이트 해야 한다.class MyComponent extends Component {
constructor(props) {
super(props)
this.state = {
number: 0,
}
}
render() {
return (
<div>
<div className="hello">brand new componenet is {this.props.name}</div>
<div>age: {this.props.age}</div>
<div>
company: {this.props.company} / {this.state.number} 개
</div>
<button
onClick={() => {
this.setState({
number: this.state.number + 1,
})
}}
>
더하기
</button>
</div>
)
}
}
위와 같은 방식으로도 할 수 있지만, transform-class-properties문법을 사용하여, constructor 바깥에서도 state와 props를 정의할 수 있다.
import React, {Component} from 'react'
import PropTypes from 'prop-types'
class MyComponent extends Component {
static defaultProps = {
name: 'yceffort',
age: 30,
}
static propTypes = {
name: PropTypes.string,
age: PropTypes.number,
company: PropTypes.string.isRequired,
}
state = {
number: 0,
}
render() {
return (
<div>
<div className="hello">brand new componenet is {this.props.name}</div>
<div>age: {this.props.age}</div>
<div>
company: {this.props.company} / {this.state.number} 개
</div>
<button
onClick={() => {
this.setState({
number: this.state.number + 1,
})
}}
>
더하기
</button>
</div>
)
}
}
export default MyComponent
transform-class-properties란 기존에 자바스크립트 클래스 syntax에서는 method외에는 아무것도 선언할 수 없게 되어 있는 것을, 조금 더 유연하게 만들어 주는 것이다.
class Cat {
constructor(name, breed) {
this.name = name
this.breed = breed
}
getBreed() {
return this.name + ' is a ' + this.breed
}
}
class Cat {
name = 'Chairman Meow'
breed = 'Sphynx'
getBreed = function () {
return this.name + ' is a ' + this.breed
}
}
또한, 화살표 함수가 더 이상 그 구문내의 this를 생성해 내지 않고, 올바르게 this가 class를 가르킬 수 있도록 도와준다.
getBreed = () => {
return this.name + ' is a ' + this.breed
}
이렇게 쓰는 것도 가능해 진다는 뜻이다.
층은 왜 쌓였고, 왜 서버로 돌아왔고, 에이전트 이후에도 스택이 남는 이유는 무엇인가. 그리고 스택이 이기는 것과 그 스택을 아는 사람의 가치는 왜 별개인가
React cache() 함수의 모든 이상한 규칙은 30여 줄짜리 구현에서 직접 따라 나온다. dispatcher, getCacheForType, WeakMap/Map 트리를 소스 레벨로 따라가며 요청 단위 메모이제이션의 동작을 끝까지 본다.
"use cache" 한 줄이 만드는 빌드 타임 변환, 캐시 키 직렬화, ResumeDataCache, cacheHandler, 그리고 Cache Components까지
"use client" 한 줄이 만드는 모듈 경계, 빌드 타임 변환, Flight 직렬화, 그리고 성능까지