3-1. state props

어떤 컴포넌트가 실행이 될 때 랜더라는 함수보다 더 일찍 실행이 되면서 그 컴포넌트를 초기화 시켜주는 코드는

constructer를 짜고 그 안에다가 적어준다. (초기화를 담당!!)

 

state의 개념이 나오는데 조금 헷갈린다. props와 같이 쓰이는데

대략 내가 느낀 점은(틀릴 가능성 농후)

state는 class의 기본 설정값이다. 초기화를 통해서 값을 설정해주고 하위 컴포넌트들의( import를 통해 가져온 )

<h1>{this.props.title}</h1>과 같이 설정 해둔 곳에 <Subject title={this.state.subject.title}>이렇게 적어둠으로써

상호작용을 할 수 있다.

 

상위의 클래스의 state값을 props를 통해 가져오고 그 가져온 값을 가공하여 return 하는 느낌이다

 

class Nav extends Component {

  render() {

    const data = this.props.data;

    let list = [];

    for (var i = 0; i < data.length; i++) {

      list.push(

        <li key={data[i].id}>

          <a href={"/content/" + data[i].id}>{data[i].desc}</a>

        </li>

      );

    }

    return <ul>{list}</ul>;

  }

}

export default Nav;

 

 

class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      subject: {

        title: "Maniac Web",

        sub: "page for maniac",

      },

      content: [

        { id: 1, title: "html", desc: "m to the a n i a c" },

        { id: 2, title: "css", desc: "m to the a n i a c" },

        { id: 3, title: "js", desc: "m to the a n i a c" },

      ],

    };

  }

 

  render() {

    return (

      <div className="App">

        <Subject

          title={this.state.subject.title}

          sub={this.state.subject.sub}

        ></Subject>

        <Nav data={this.state.content}></Nav> <<data를 설정해줌으로써 Nav에서 this.porps.data로 받아올 수 있다.

        <Content></Content>

      </div>

    );

  }

}

 

export default App;

 

 

 

배열처럼  여러개의 목록을 자동으로 생성할 때는 key라는 값을 설정해주어야 한다. 각각 다른 값