생코 React (1)~(4) 코드 파악, 도구 정리

======================================================

*현재진도

- 20.1 update부터 하면됨

*모르겠는부분

- (3)이론 2 17.3에

var data = this.props.data;인데

왜 굳이 bind로 해서 data[i].id로 해서 function(id 이렇게 인자로 onChangePage(id);이렇게 넣나?

onChangePage(data[i].id) 이렇게 넣으면 안돼?

안되니까 저렇게 할 것 같은데 왜 안됨? this때문인건 아닌 것 같은데 this.props.onChangePage는 되면서??

 

======================================================

======================================================

리액트 쌩클래스(함수밖)에 

1.필드 선언할 때 프롭스 호출할 수 있어, 변수로 미리 설정해두고 쓰려고 했는데 잘 되네

 : 예전엔 props를 생성자에서 super어쩌구로 써줘야 했었던 것 같지만 필드가 생성자보다 먼저인것 같지만 이런건 강해지면 생각해보자

2.console.log("123"); 이런거 안돼 이런거 여기다 쓰면 어디서 쓰질 못하니까 못하게 막았겠지? 이해가능

3.타입 선언 안돼 오류나

4.그냥 함수 호출은 안돼도변수에다 넣는건 돼

- 선언할 때 this가능, 

- 선언할 때 함수호출 가능

 

var one = console.log("123"); 이런것을 객체.속성 이렇게 쓸 수 있어

이때 객체는 생성해야돼

var t = new Test();

t.one; 이렇게

class test {

  one = test1() {

    return console.log(123);

  }

}

는

에러네 왜냐? 저건 메소드가 아니니까 function 써야지

 

class test {

    test1() {

    return console.log(123);

  }

  one = this.test1();

}

var t = new test();

console.log(t.one);

이건 잘 되고

이렇듯 this는 먹혀 그냥 그 객체야. 그냥 쌩 함수는 안돼 클래스 안에서는 선언밖에 안된다

 

======================================================================

[1]도구 정리

- export ~한걸 import ~해서 <~ 로 쓰기만 하면 된다. ▽어디서든

- state를 props로 준다는 건 상위상태를 하위에 값으로 전달하는건데, 계속 바뀌는 걸 넣어줌으로 컴포넌트를 다양하게 사용하는 것이다.

- 밑쪽에 배열 넣기

- 밑에 15.3.에 배열 props처리

 

- mode 값에 따라 결과 달라지게 : if문으로 props로 들어갈 내용 변수에 이걸넣든지 저걸넣든지로 함.

 : 이걸 유효하게 쓰려면 이벤트에 따라서 mode값이 달라져야겠지

- 이벤트에 따라서 state변수 바꾸기(부모편) : 자기 안에 있는거라 그냥 setState, state값을 바꿀 땐 setState

onClick

(1)JS에선 onclick="" JSX에선 onClick={}

(2)여기서 (e)로 받으면 e.preventDefault();쓸 수 있어

(3)bind : this.setState를 써야하는데, 이벤트가 실행됐을 때 호출되는 함수는 this의 값이 세팅이안돼있어. .bind(this)를 추가해주면 됨.

 

- 이벤트에 따라서 state변수 바꾸기(자식편) : 요게진짜다

(1)자식에 props로 setState가 들어가있는 함수를 넘긴다 ▽여기서 하는건 함수 선언느낌 이 아니고 함수는 여기에(부모에)있어 하는 느낌

일까 아니면 그냥 부모 코드에 자식이 다 불려와진걸까?

(2)자식 onClick에서 function에서 this.props.그 함수 이렇게 호출한다 : 함수니까 뒤에 ()를 붙이고 bind(this)도 해야함.

=>자식에 있는 이벤트로 부모의 state가 바뀌었다!

 

- 반복문 대신 filter()를 쓸 수 있다. 여러 배열 중에 어떤 컬럼 의 값으로 나머지 컬럼을 쓸 수 있게 할 때

모든 배열중에서 현재 select_content_id 의 값과 같은 배열을 찾아내면 그럼 그 회차의 반복문 안에서 그 배열의 내용을 써먹는것임.

- 저기서 어떤 컬럼의 값(index)을 빼오는 방법 : list에 push했을 때 그때 props에 속성을 index로 준다.

- e라는 이벤트 객체를 활용해서 function안에서 props를 써먹기, 함수는 되는데 딴건 안돼서 막 bind에 인자 넣어서 function의 인자로 돌리기 이런걸로 하네? 왜 함수는 되고 저건 안되지?

17.3.끝쪽에서 했던거야

▽애초에 나뉘어져 있으면 그냥 숫자 띡 문자열 스슥 쓰면 되는데 맞지

 

 : JS부분에 컴포넌트 넣어도 상관없네, 변수에 담는거니까 그렇네 push도 JS부분이잖아 그 걸 return에서 { } 로 쓰면 되는걸

 

- create : push, from, concat... : 그 form 내용을 e.target.어쩌구.value로 받아와서 그걸 concat한 뒤 setState로 배열을 갱신

======================================================

======================================================

======================================================

[2]코드 파악 : 숫자는 해당 강의 번호

======================================================

15.2.

를

로 바꾼 것임.

 

======================================================

15.3.

저 값 3개를 TOC에 주입할거야 === 그 안에서 구분을 해줘야 한다는 말 === 구분 할 수 있는게 안에 가야 있다는?

이렇게.

이걸 받은 입장에서는 this.props.data(배열)를 갖고 있지

이걸로 목록을 생성하는 법은 render() { 이곳, return전에서 JS로 반복문을 써서 lists에 담는다 return();} 

(1)배열.push()

(2)lists.push안에 문자열도 아니고 그냥 그대~로 담네 나중에 JSX문법이 될테니까 그것에 맞춰서 { } 도 쓰기도 하고

(3)그 리스트에 담은걸 return안에 {lists} 로 넣기만 함. 그럼 그대로 나올 테니까

TOC의 내용을 바꾸지 않고 내가 사용하는 쪽에서 넣는 데이터를 바꿔서 변화가 가능

 

======================================================

17.3. 강의 전 코드

subject는 17.1에서 변경x

src/App.js

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:'read',
      subject:{title:'WEB', sub:'World Wid 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 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}
          onChangePage={function(){
            this.setState({mode:'welcome'});
          }.bind(this)}
        >
        </Subject>
        <TOC 
          onChangePage={function(){
            this.setState({mode:'read'});
          }.bind(this)} 
          data={this.state.contents}
        ></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}
export default App;

src/components/TOC.js

import React, { Component } from 'react';
class TOC extends Component{
    render(){
      console.log('TOC render');
      var lists = [];
      var data = this.props.data;
      var i = 0;
      while(i < data.length){
         lists.push(
          <li key={data[i].id}>
            <a 
              href={"/content/"+data[i].id}
              onClick={function(e){
                e.preventDefault();
                this.props.onChangePage();
              }.bind(this)}
            >{data[i].title}</a>
          </li>);
        i = i + 1;
      }
      return (
        <nav>
            <ul>
                {lists}
            </ul>
        </nav>
      );
    }
  }
export default TOC;

src/components/Subject.js

import React, { Component } from 'react';
class Subject extends Component {
    render(){
      console.log('Subject render');
      return (
        <header>
        <h1><a href="/" onClick={function(e){
              e.preventDefault();
              this.props.onChangePage();
            }.bind(this)}>{this.props.title}</a></h1>
            {this.props.sub}
        </header>  
      );
    }
  }
export default Subject;

======================================================

17.3.강의 후

subject는 17.1에서 변경x

src/App.js

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:'read',
      selected_content_id:2,
      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 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'){
    var i = 0;
      while(i < this.state.contents.length){
        var data = this.state.contents[i];
        if(data.id === this.state.selected_content_id) {
          _title = data.title;
          _desc = data.desc;
          break;
        }
        i = i + 1;
      }
    }
    return (
      <div className="App">
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}
          onChangePage={function(){
            this.setState({mode:'welcome'});
          }.bind(this)}
        >
        </Subject>
        <TOC 
            onChangePage={function(id){
            this.setState({
              mode:'read',
              selected_content_id:Number(id)
            });
          }.bind(this)} 
          data={this.state.contents}
        ></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}
export default App;

 

 src/components/TOC.js
 
 import React, { Component } from 'react';
class TOC extends Component{
    render(){
      console.log('TOC render');
      var lists = [];
      var data = this.props.data;
      var i = 0;
      while(i < data.length){
        lists.push(
          <li key={data[i].id}>
            <a 
              href={"/content/"+data[i].id}
              data-id={data[i].id}
              onClick={function(e){
                e.preventDefault();
                this.props.onChangePage(e.target.dataset.id);
              }.bind(this)}
            >{data[i].title}</a>
          </li>);
        i = i + 1;
      }
      return (
        <nav>
            <ul>
                {lists}
            </ul>
        </nav>
      );
    }
  }
export default TOC;

======================================================

 

======================================================

20.1.

▽앱 설명 중간에 다시 좀(전체 코드 파악) : 

 

===App.js의 state를 각 컴포넌트에 props로 넣어준다.===

 

state는

- mode : welcome, read, create 일단 3개라고 쳐 --이건 맨 아래 내용을 바꿔주는 애들이야.

 

맨 위랑

중간 얘기는

아니야

 

mode가 바뀌면 render()가 실행되겠지

거기엔 title, desc를 바꾸는 코드가 있고

그것들은 <ReadContent에 props로 들어가. 그냥

얘네야

그게 _article = <ReadContent title={_title} desc={_desc}></ReadContent>

이렇게 article변수에 들어가서 마지막줄에 {_article}로 들어감.

 

 

setState()로 mode가 welcome이면 state에 해당 title과 desc가 하나밖에 없어서 그걸 넣어주고

setState()로 mode가 read면 contents는 3개라서 contents.id와 

그 클릭한 곳에서 가져온 숫자(selected_content_id)

가 맞을 때의 title과 desc를 _article에 넣어줌.

create면 _article에 <CreateContent를 넣음.

 

- selected_content_id : 클릭한 곳에서 id값을 뽑아옴, 

TOC가 prop로 data라는 애를 설정하고(data라는 이름으로 안에서 쓰이게) 그건 contents 배열이다

 

그건 TOC안에서 this.props.data라고 쓰이지만 실제로는 this.state.contents지

this.state.몇번째 contents의 id 

아니 TOC구성을 좀 알아야겠는데 얘네는 while문으로 배열에 push를 함.

 

- subject : <Subject로 들어가는 맨 위에 두 줄

- welcome : title과 desc

- contents : 배열, title과 desc    =>welcome이랑 contents는 동급 둘다 _title, _desc에 들어갈 애를 정해줘

그리고 _title, _desc는 <ReadContent에 props로 들어가는데 이게 통째로 _article이라는 변수에 들어가.

 

페이지 구성은

<Subject :

누르면 mode가 welcome으로 바뀜.

 

<TOC :

누르면 mode가 read로 바뀌고 select_content_id가 해당번호로 바뀜

 

=====위 네개 전부 _article을 바뀌게 함

 

<Control

{_article}

이렇게 4개거든

 

 

setState에 mode가

welcome : 맨 위에 WEB을 누름

read : HTML, CSS, JavaScript라고 써져있는걸 누름

create

update

 

 

그리고

UpdateContent라고 하는 컴포넌트가 실행될 때

입력값으로 현재 선택된 selected_content_id에 맞는 해당 컨텐트를 주입한다.

 

/content/는 뭐야? 아무 의미 없어 나중에 e.preventDefault로 동작 못하게 해

 

welcome과 contents가 mode에 따라 바뀜

contents중에선 selected_content_id가 뭐냐에 따라 바뀜