[생활코딩] 2# 리액트 공부

component 파일 나누기

import React,{ Component } from 'react';

와 같이 component 를 로드한다음 extends

class TOC extends Component{
render(){
    return(
            <nav>
            <ul>
                <li><a href="1.thml">HTML</a></li>
                <li><a href="2.thml">CSS</a></li>
                <li><a href="3.thml">JavaScript</a></li>
            </ul>
        </nav>
    )
}
}

export default TOC;

해야한다

그후 export default TOC; 로 내보내 준다라고 알려줘야함

Props 와 state

• Props
  • 사용자에게 중요한거고
    • 프롭스에게 밸류를 줘서 조작할수있다
• state
  • 로직을 구현하기 위한것
    • 내부적으로 존재하고 외부에 나타나면 안된다.

좋은 컴포넌트를 만들어 주기 위해서2개를 각각 철저하게 분리해줘야한다.

constructor(props){//랜더하기전에 초기화 해주고 싶은코드는 constructor 안에 써야한다.
    super(props)
}

constructor 는 component 안에서 render 전에 초기화 시킬 소스를 실행시켜주는 함수이다.

constructor(props){//랜더하기전에 초기화 해주고 싶은코드는 constructor 안에 써야한다.
    super(props);
    this.state = {
      subject:{title : 'WEB', sub : 'world wide web'}
 }
 

와 같이 this.state 에 object 타입으로 미리 초기화를 시켜줄수 있다 이후 소스에 해당하는 state 를 넣어 줄때는

<Subject title={this.state.subject.title} sub="world wide web!"></Subject>

와 같이 아까 초기화해준 문자열을 넣어준다. 이때 js 를 그냥 실행 시켜주고 싶다면 {} 를 쓴다

이와같이 내부적으로state 를 설정해주는것은 사용자는 알수가 없다. 이것이 은닉이고

이것이 중요하다.

엘리먼트 동적생성

  render(){
  return (
    <div className="App">
      <Subject title={this.state.subject.title} 
        sub={this.state.subject.sub}></Subject>
      <Subject title="React" sub="For UI"></Subject>
      <TOC></TOC>
      <Content title="HTML" desc="HTML is Heyper..."></Content>
    </div>
  );
  }
  

TOC 의 목록을 동적으로 생성해 주도록하자

    this.state = {
      subject:{title : 'WEB', sub : 'world wide web'},
      contents :[
        {id : 1, title : 'HTML', desc : 'HTML is for ...'},
        {id : 2, title : 'CSS', desc : 'CSS is for ...'},
        {id : 3, title : 'JavaScript', desc : 'JavaScript is for ...'}
      ]
    }
    

먼저 state 에서 contents 라는 배열을 만들어준다 = toc 내용물

이후

<TOC data={this.state.contents}></TOC>

data 라는 props 로 배열값을 넘겨준다

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[i].title}</a></li>);
            i = i+1;
        }
        return(
                <nav>
                <ul>
                    {lists}
                </ul>
            </nav>
        )
    }
}

이후 toc.JS의 소스를 위와같이 바꾼다.

먼저

        var lists= [];

​        var data = this.props.data;

에서 배열과 state 를 입력 받은 data를 선언해준다.

        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[i].title}</a></li>);
            i = i+1;
        }
        

이후 while 을 돌려서 lists 배열에 li 엘리먼츠를 쌓아준다

key={data[i].id} 는 자식 들은 각각 고유한 id값이 필요하다는 에러가 나니 넣어줌

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[i].title}</a></li>);
            i = i+1;
        }
        return(
                <nav>
                <ul>
                    {lists}
                </ul>
            </nav>
        )
    }
}

마지막으로 return 에서 쌓아준 lists를 뿌려준다.

왜 배열이 출력이 그냥될까?

이벤트와 스테이트랑 프롭스가 상호작용한다

state나 프롭스 값이 바꾸면 하위 랜더가 전부 다시호출됨 = 다시 싹 화면이 랜더링됨

이벤트 프로그래밍

subject.js 의 버튼을 눌렀을때 state 바뀌는 이벤트 설치

React에서는 onclick 을 onClick 으로 쓴다.

            <h1><a href="/" onClick ={function () {
              alert("hi");
            }}> {this.state.subject.title} </a></h1>
            

이때 alert 이 뜨면 렌더링이 다시됨 따라서 a 태그의 클릭하면 이동되는것을 막을꺼임

            <h1><a href="/" onClick ={function (e) {
              console.log(e);
              debugger;
            }}> {this.state.subject.title} </a></h1>
            

리액트는 이벤트를 만나면 첫번째 파라미터로 이벤트를 날려주기로 되어있음.

debugger 를 쓰면 크롤 개발자 도구에서 실행일 멈추고 다음으로 넘어감

e.preventDefault();

를 써주면 해당 객체 태그의 기본 동작을 막음 - html

이벤트에서 state 변경하기

            <h1><a href="/" onClick ={function (e) {
              e.preventDefault();
              this.state.mode = 'welcome'
            }}> {this.state.subject.title} </a></h1>

런 해보면 2가지 문제점이 나온다.

this.state.mode = 'welcome' 여기서 this의 값이 컴포넌트를 가리키지않고 아무 값도 셋팅안되어있음

해결법은

            <h1><a href="/" onClick ={function (e) {
              e.preventDefault();
              this.state.mode = 'welcome'
            }.bind(this)}> {this.state.subject.title} </a></h1>
            

이렇게 bind(this) 를 써주면 이제 this 는 이 컴포넌트가 되는거다.

하지만 아직도 눌러도 바뀌지는 않는다.

이유는 this 를 저렇게 하면 react 는 state 값이 바뀐지를 모른다,

            <h1><a href="/" onClick ={function (e) {
              e.preventDefault();
              // this.state.mode = 'welcome'
              this.setState({
                mode: 'welcome'
              });
            }.bind(this)}> {this.state.subject.title} </a></h1>
            

따라서 this.setState({ 를 써줘야한다