[TIL]21.05.19
오늘 배운 것
import logo from './logo.svg';
import React, { useState } from 'react'; // 혹은 constructor 사용가능, 각 컴포넌트에 번갈
// import {BrowserRouter, Link, Switch, Route} from 'react-router-dom';
import './App.css';
import Subject from './components/Subject';
import Toc from './components/Toc';
import Content from './components/Content';
class App extends React.Component {
// constructor을 쓸려면 React.Component를 꼭 써야하나? 왜?
constructor(props) {
super(props);
this.state = {
web: { title: 'WEB', desc: 'Welcome!!'},
mode:'welcome',
selected_id: 0,
content:[
{id: 1, title: 'HTML', desc: 'HTML is..'},
{id: 2, title: 'CSS', desc: 'CSS is..'},
{id: 3, title: 'JavaScript', desc: 'JavaScript is..'}
]
}
}
// getContent(){
// let _title, _desc = null;
// if(this.state.mode === 'welcome'){
// _title = this.state.web.title;
// _desc = this.state.web.desc;
// }else if(this.state.mode === 'read'){
// let arrTemp = this.state.content.filter((el) => {
// return el.id === this.state.selected_id;
// })
// _title = arrTemp.title;
// _desc = arrTemp.desc;
// }
// }
render() {
let _title, _desc = null;
if(this.state.mode === 'welcome'){
_title = this.state.web.title;
_desc = this.state.web.desc;
}else if(this.state.mode === 'read'){
let arrTemp = this.state.content.filter((el) => {
return el.id === this.state.selected_id;
})
_title = arrTemp.title;
_desc = arrTemp.desc;
}
return (
<>
{/* Subject 컴포넌트, WEB 제목과 title을 출력하는 */}
<Subject
title={this.state.web.title}
desc={this.state.web.desc}
onChangePage={function(id){
this.setState({
mode: 'welcome',
selected_id:Number(id)
}).bind(this)}}
/>
{/* TOC 컴포넌트, contents 목록을 출력하고 클릭하면 그 contents의 id을 가진 path로 이동하는 */}
<Toc
contents={this.state.content}
onChangePage={function(id){
this.setState({
mode: 'read',
selected_id:Number(id)
})
}.bind(this)}
/>
{/* Content 컴포넌트, TOC컴포넌트에서나 Subject컴포넌트에서 contents의 id을 가진 path가 변경되면 그에 맞게
contents가 가진 id에 맞게 자세한 정보를 출력하는 컴포넌트 */}
<Content title={_title} desc={_desc}/>
</>
);
}
}
export default App;
오늘의 회고
render()함수와 return()사이의 코드가 작동이 제대로 잘 안되는 것 같다. 원래 바라는 것은 <li>
태그로 감싸진 저 세 목록들을 클릭하면 주소(path)가 바뀌고, 아래 <Content />
컴포넌트로 이루어진 즉, title과 desc이 주소, path에 따라 바뀌어야하는 데, 그 구현이 안된이유가 render()함수와 return()사이의 코드같아서 내일 다시 봐야할 것 같다.
처음 react를 배울때는 react-router-dom을 배워서 주소를 바꿨는데, 이렇게 생활코딩에서 알려준대로 바꿔보니 신기했다. 그리고 어떤게 더 좋을지를 살펴보고 습득, 공부를 해야겠다. 이 react-router-dom과 지금 이 <a>
를 사용해서 주소를 바꾸는 방법 중 차이가 무엇인지도 알고싶다..
Author And Source
이 문제에 관하여([TIL]21.05.19), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@juho00ng/TIL21.05.19-cxj73bq7저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)