props
state
👉 state는 다양한 동작을 하는 컴포넌트 제작에 필수
// App.js
class App extends Component {
constructor(props){ // render보다 먼저 실행되어 컴포넌트 초기화
super(props);
this.state = {
subject:{title: 'WEB', sub: 'World Wide Web!'}
}
}
render() {
return (
<div className="App">
// state 사용
<Subject
title={this.state.subject.title}
sub={this.state.subject.sub}>
</Subject>
</div>
);
}
}
App
의 값을 하위 컴포넌트인 Subject
에 state 값을 통해 전달 가능// App.js
class App extends Component {
constructor(props){
super(props);
this.state = {
subject: {title: 'WEB', sub: 'World Wide Web!'},
contents: [
{id:1, title:'HTML', desc:'HTML is for information'},
{id:2, title:'CSS', desc:'CSS is for design'},
{id:3, title:'JavaScript', desc:'JavaScript is for interactive'}
]
}
}
render() {
return (
<div className="App">
...
<TOC data={this.state.contents}></TOC>
</div>
);
}
}
// TOC.js
class TOC extends Component {
render(){
var lists = [];
var data = this.props.data;
var i = 0;
while(i < data.length){
lists.push(<li><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
i = i + 1;
}
return (
<nav>
<ul>
{lists}
</ul>
</nav>
);
}
}
key
부여lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
🔗 생활코딩 React 1. 베이스 캠프 - props - read-only - 컴포넌트 안에서 변경 불가 - 이벤트를 통해 변경 가능 - state - 비동기식 - setState()로 변경 가능 2. create 구현 1) 소개 - CRUD(Create Read Update Delete) - 동적으로 요소를 추가하는 기능 구...
🔗 생활코딩 React 1. 이벤트, state, props 그리고 render 함수 - 이벤트, state, props가 상호작용하면서 애플리케이션에 역동성 부여 - props나 state가 수정되면 해당되는 컴포넌트의 render 함수가 재호출됨 👉 화면이 다시 그려짐 🤷♀️ 이게,,,뭐죠,,,?...
🔗 생활코딩 React 1. State 소개 - props - 사용자가 컴포넌트를 사용하는 입장에서 중요 - 컴포넌트의 동작을 바꾸고 싶을 때 제공하는 문법적인 정보 - state - props의 값에 따라 내부 구현에 필요한 값 👉 state는 다양한 동작을 하는 컴포넌트 제작에 필수 2. State 사용 - 외부에서 ...
😥 데벨업 정말 좋은 기회를 얻게 돼서 열심히 하고 싶었는데... 이렇게나 현실에 치여서 소홀해질 줄이야. 할 수 있는 데까지라도 해봐야겠다. 수업을 제대로 듣지도 못해서 퀘스트에 참가도 못 하고 있는 게 너무 아쉽다. - 🔗 바로 실행해보면서 배우는 Node.js 1. npm 소개 및 설치 - npm - Node Package Mo...