[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>를 사용해서 주소를 바꾸는 방법 중 차이가 무엇인지도 알고싶다..