웹 프론트엔드 시작하기 - 4. 리액트의 이벤트

19강. 이벤트 state props 그리고 render 함수

class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      // <Subject>
        //읽기, 클릭 구분을 위한 mode
      mode:'welcome',
      subject:{title:"WEB", sub:"World wide Web!"},
      welcome:{title:"welcome", desc:"Hello, React!"},

      // <TOC>
      contents:[
        {id:1, title:'HTML', desc: 'HTML is ..'},
        {id:2, title:'CSS', desc: 'CSS is ..'},
        {id:3, title:'JS', desc: 'JS is ..'}
      ]
    }
  }

  //↑ props or state가 바뀌면
  //↓ render가 다시 호출되면서
  // 화면이 다시 그려짐

  render(){

    //mode의 상태값에 따라 출력할 화면 정의
    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>
        <Subject title="React" sub="for ui"></Subject>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

 

20강. 이벤트 설치

return(
  <div className="App">
    <!--<Subject 
      title={this.state.subject.title} 
      sub={this.state.subject.sub}>            
    </Subject>-->

    <!--Subject.js -->
    <header>
        <!--<h1><a href="/">{this.props.title}</a></h1>
        {this.props.sub} -->

        <!-- 1. props가 아닌 state를 그대로 넣음 -->
        <!-- 2. 클릭이벤트 추가 : onClick -->
        <!-- 3. 함수 호출시 함수의 첫번째 파라미터 매개변수의 값으로 이벤트객체 주입함 : e-->
        <!-- 4. console.log(e), debugger;로 확인 -->
        <h1><a href="/" onClick={function(e){
        
          <!-- 5. a태그의 기본동작(화면 리로드)을 막음 -->
          e.preventDefault();

        }}>{this.state.subject.title}</a></h1>
        {this.state.subject.sub}     
    </header>

    <Subject title="React" sub="for ui"></Subject>
    <TOC data={this.state.contents}></TOC>
    <Content title={_title} desc={_desc}></Content>
  </div>
);
}

 

21강. 이벤트에서 state 변경하기

return(
      <div className="App">
        <header>
            <h1><a href="/" onClick={function(e){
              e.preventDefault();
              
              <!--this.state.mode = 'welcome';-->
              <!--1) this의 값을 찾지 못함-->
              <!--2) react가 변화를 알지 못함-->
              this.setState({
                mode:'welcome'
              });

            }.bind(this)}>{this.state.subject.title}</a></h1>
            {this.state.subject.sub}     
        </header>

        <Subject title="React" sub="for ui"></Subject>
        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

 

22강. 이벤트 bind 함수 이해하기

var obj = {name:'apple'};

function bindTest(){
	console.log(this.name);
}
bindTest();	//undefined

var bindTest2 = bindTest.bind(obj);	//새로운 함수가 복제됨, this는 obj를 받음
bindTest2();	//apple

 

23강. 이벤트 -setState 함수 이해하기

class App extends Component{

  //props값 초기화
  //constructor : render 전에 실행되면서 초기화 담당
  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 ..'},
        {id:2, title:'CSS', desc: 'CSS is ..'},
        {id:3, title:'JS', desc: 'JS is ..'}
      ]
    }
  }


  render(){

	중략

    return(
      <div className="App">
        <header>
            <h1><a href="/" onClick={function(e){
              console.log(e);
              e.preventDefault();
              
              <!-- 최초할당(constructor)에서는 -->
              <!-- this.state.mode = 'welcome'; 형식으로 가능 -->
              <!-- 변경할 때는  -->
              <!-- setState 함수 사용 -->
              this.setState({
                mode:'welcome'
              });

            }.bind(this)}>{this.state.subject.title}</a></h1>
            {this.state.subject.sub}     
        </header>
      </div>
    );
  }
}

export default App;

 

24강. 컴포넌트 이벤트 만들기(1)

//App.js 에서 setState 사용하여 변경하는 함수사용
<Subject 
  title={this.state.subject.title} 
  sub={this.state.subject.sub}

  //해당이벤트에 설치한 함수 호출
  onChangePage = {function(){
    //alert('hihihi');
    this.setState({mode:'welcome'});
  }.bind(this)}
  >            
</Subject>

//subject.js에서 불러오는 이벤트
<header>
  <h1><a href="/" onClick={function(e){
    e.preventDefault();
    this.props.onChangePage();
  }.bind(this)}>{this.props.title}</a></h1>
  {this.props.sub}            
</header>

 

25강. 컴포넌트 이벤트 만들기(2), (3)

//App.js
class App extends Component{

  constructor(props){
    super(props);
    this.state = {
    
      // <Subject>
      mode:'read',
      selected_content_id:2,
      subject:{title:"WEB", sub:"World wide Web!"},
      welcome:{title:"welcome", desc:"Hello, React!"},

      // <TOC>
      contents:[
        {id:1, title:'HTML', desc: 'HTML is ..'},
        {id:2, title:'CSS', desc: 'CSS is ..'},
        {id:3, title:'JS', desc: 'JS is ..'}
      ]
    }
  }

  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'){
    
	//모드가 read일때 클릭한 요소의 id값을 가져옴
      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;
      }
    }
  }
}
export default App;

//TOC.js
class TOC extends Component{
    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){
                    
                        <!-- debugger; -> e는 a태그를 가리킴 -->
                        e.preventDefault();
                        this.props.onChangePage(e.target.dataset.id);
                    }.bind(this)}
                    >{data[i].title}</a>
                </li>
            );
            i = i + 1;
        }
    }
  }
  export default TOC;