-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
컴포넌트 2번 호출되는 문제
20.05.25 17:02 작성 조회수 94
0
console로그를 확인해보니
각 컴포넌트들이 두번 씩 호출되는데 왜 그런지 알 수 있을까요?
import React, { Component } from 'react';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';
import './App.css';
class App extends Component{
constructor(props){
super(props);
this.state = ({
mode : 'welcome',
subject : { title : "WEB", sub : "World wide web!"},
welcome : { title : "Welcome", desc : "Hello, React!!"},
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() {
console.log('App.js render');
var _title, _desc = null;
if(this.state.mode === 'welcome'){
_title = this.state.welcome.title;
_desc = this.state.welcome.desc;
} else if(this.state.mode === 'read'){
_title = this.state.contents[0].title;
_desc = this.state.contents[0].desc;
}
return (
<div className="App">
<Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>
<TOC data={this.state.contents}></TOC>
<Content title={_title} desc={_desc}></Content>
</div>
);
}
}
export default App;
답변을 작성해보세요.
답변 0